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

Answer 2

我认为你正试图用生成的代码（可能是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/

Answer 3

$('input[type="radio"][name="radio1"]').on('change', function() {
    $('textarea[name="textarea"]').toggle($.trim(this.value)=='1');
});

FIDDLE

单击单选按钮时显示文本框

3 个答案: