jquery - 如何使用 jQuery 根据保存的单选按钮选择进行切换？

Question

我有一个用户可以保存并返回进行编辑的表单。我对根据用户对上一个问题的回答切换 div 的表单有疑问。这些问题有多种类型。如果答案为"is"，则应显示该问题的 div。

当前，div 正在表单加载上显示，而它们本应隐藏。

示例:http://jsfiddle.net/BbrwT/14/ (我设置了示例，因此问题一尚未得到解答，问题二已得到回答“否”)

<div>
    <label>Select #1:</label>
    <input type="radio" name="radio1" class="toggle" value="1">Yes
    <input type="radio" name="radio1" class="toggle" value="0">No
</div>

<div id="details">
   Details #1
</div>

<div>
    <label>Select #2:</label>
    <input type="radio" name="radio2" class="toggle" value="1">Yes
    <input type="radio" name="radio2" class="toggle" value="0" checked="checked">No
</div>

<div id="details">
   Details #2
</div>

Javascript:

$(document).ready(function() {

    if($('.toggle:checked').val() != 1){
        $(this).parent().next('#details').hide()
    }

    $('.toggle').on('change',function(){

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

        $(this).parent().next('#details').toggle(showOrHide);

    })  

});

Answer 1

不确定这是否是您想要的，但您可以将 change 方法链接到您的 change 处理程序 -

$('.toggle').on('change',function(){

    var showOrHide = false;

    $(this).siblings('input[type=radio]').andSelf().each(function() {
        if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true;
    })    

    $(this).parent().next('#details').toggle(showOrHide);

}).change()  

这应该在加载页面时调用 change 方法并隐藏逻辑状态应隐藏的任何内容。我还稍微改变了逻辑，因此也检查了同级单选按钮的值。

演示 - http://jsfiddle.net/sBErV/2/