javascript - 单击单选选项时显示文本框

Question

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

脚本

            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>

谢谢!

Answer 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();
    }
})