0

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

我的表单上有一组 20 个问题，当用户选择“是”时，我希望为该特定问题显示一个文本区域，以便他们输入描述。

我之前遇到过一个问题，选择“是”单选按钮会切换页面上所有文本区域的可见性，但我试图用 来解决这个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>
4

1 回答 1

2

在以下行中，您分配true或分配false给showOrHide变量：

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

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

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

这是一个工作示例。

在单独的说明中，您可以稍微简化代码，因为0and1将强制转换为falseand true，因此您不需要条件语句：

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

此外，如果您使用的是最新版本的 jQuery (1.7)，您应该on使用bind.

于 2011-11-19T21:40:15.173 回答