Question

我知道这里有很多其他帖子有类似的问题，但我可以找到一个与多个单选按钮相关的按钮，用于在单个页面上切换可见性。

我的表单上有一组20个问题，当用户选择“是”时，我想要一个textarea来显示该特定问题，以便他们输入说明。

我之前遇到过一个问题，选择“是”单选按钮会切换页面上所有textareas的可见性，但试图用parent().find('.toggle')解决这个问题，但它似乎仍然没有工作。

你能提供的任何帮助都会很棒！

使用Javascript：

$('.toggle').hide();

$('.show').bind('change',function(){

    var showOrHide = ($(this).val() == 1) ? true : false;

    showOrHide.parent().find('.toggle').toggle(showOrHide);

})

HTML：

<div class="question">
    <label>Question 1</label>
    <span class="options"> 
        No <input type="radio" class="show" value="0" id="question_1_no" name="question_1">
        Yes <input type="radio" class="show" value="1" id="question_1_yes" name="question_1">
        <br />
        <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea>
    </span> 
</div>

<div class="question">
    <label>Question 2</label>
    <span class="options"> 
        No <input type="radio" class="show" value="0" id="question_2_no" name="question_2">
        Yes <input type="radio" class="show" value="1" id="question_2_yes" name="question_2">
        <br />
        <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea>
    </span> 
</div>

Answer 1

在以下行中，您可以为true变量指定false或showOrHide：

var showOrHide = ($(this).val() == 1) ? true : false;

然后尝试在该布尔文字上调用jQuery方法，显然这不起作用。再次使用this。你也可以使用siblings而不是爬上一个级别：

$(this).siblings('.toggle').toggle(showOrHide);

这是working example。

另外，您可以稍微简化一下代码，因为0和1会强制转换为false和true，因此您不需要条件陈述：

$('.show').bind('change',function() {
    $(this).siblings('.toggle').toggle($(this).val());
});

此外，如果您使用的是最新版本的jQuery（1.7），则应使用on代替bind。

如何使用jQuery的单选按钮切换div可见性？

1 个答案: