0

我试图让这个函数显示/隐藏文本框元素。到目前为止，我运气不佳。谁能告诉我如何通过在您选择的单选选项上设置其样式可见或不挂起来显示和隐藏元素？这是我到目前为止所拥有的。

脚本

            function hide(id)
            {
                document.getElementById(id).style.visibility='hidden';
            }

            function show(id)
            {
                document.getElementById(id).style.visibility='visible'; 
            }

html

            <div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
            <fieldset data-role="controlgroup" data-type="horizontal">
            <label>Question?</label>

            <input type="radio" name="radio1" id="'+QuestionID+'_1" value="1" onClick="show("comment_'+QuestionID+'")"/>
            <label for="'+QuestionID+'_1">Yes</label>

            <input type="radio" name="radio1" id="'+QuestionID+'_0" value="0" onclick="hide("comment_'+QuestionID+'")"/>
            <label for="'+QuestionID+'_0">No</label>
            </fieldset>

            //I am trying to make these visable if yes is selected
            <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;" id="comment_'+QuestionID+'"></textarea>
            <br />
            </div>

谢谢！

4

3 回答 3

1

onSelect在单选按钮上没有任何意义......它用于在输入字段中“选择”文本。改为使用onClick。但是，如果您使用onClick，则需要检查单选按钮是否实际被选中，因此这会使您的 JS 部分复杂化。

由于您将问题标记为“jQuery”，这就是我要做的：

HTML：

<div class="radioToggle" data-role="fieldcontain" data-theme="c" id="quests'+id+'">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <label>Question?</label>

        <input type="radio" name="radio1" id="'+QuestionID+'_1" value="1" />
        <label for="'+QuestionID+'_1">Yes</label>

        <input type="radio" name="radio1" id="'+QuestionID+'_0" value="0" />
        <label for="'+QuestionID+'_0">No</label>
    </fieldset>

    //I am trying to make these visable if yes is selected
    <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;" id="comment_'+QuestionID+'"></textarea>
    <br />
</div>

JS：

$('.radioToggle').on('click', 'input:radio', function(){
    var parent = $(this).closest('.radioToggle'),
        textbox = parent.find('textbox');
    if ($(this).attr('id') == '1') {
        textbox.show();
    } else {
        textbox.hide();
    }
})
于 2013-02-27T19:00:22.063 回答
1

我认为您正在尝试使用生成的代码（可能是 php）来完成某些事情。以下是您需要做的事情的要点：

<div data-role="fieldcontain" data-theme="c" id="quests'+id+'">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <label>Question?</label>
        <input type="radio" name="radio1" value="1" data-id="123" />
        <label>Yes</label>
        <input type="radio" name="radio1" value="0" data-id="123" />
        <label>No</label>
    </fieldset>
    <textarea cols="30" rows="8" name="textarea" style="width:80%; visibility:hidden;"></textarea>
    <br />
</div>
<div id="comment_123" style="display:none">here I am</div>

和脚本：

$("input[type='radio']").change(function () {
    if ($(this).val() == "1") {
        $('#comment_' + $(this).data("id")).show();
    } else {
        $('#comment_' + $(this).data("id")).hide();
    }
});

这里有一个小提琴来说明这个想法：http: //jsfiddle.net/DgAHf/

于 2013-02-27T19:05:21.020 回答
1 
$('input[type="radio"][name="radio1"]').on('change', function() {
    $('textarea[name="textarea"]').toggle($.trim(this.value)=='1');
});

小提琴

于 2013-02-27T19:14:27.327 回答