Question

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

目前，div应显示在表单加载时，应隐藏它们。

示例：http://jsfiddle.net/BbrwT/14/（我设置示例，因此问题一尚未得到解答，问题二已被回答＆＃39;没有＆＃39;）

<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/

Answer 2

这是一种隐藏div的div相对简单的方法，该div包含input value="0" checked的div $(document).ready(function() { $('div:has("input[value=0]:checked")').next('div').hide(); });：

id

JS Fiddle demo

请注意，您有两个元素共享相同的function showHide(){ $('div:has("input:radio[value=0]:checked")').next('div').hide(); $('div:has("input:radio[value=1]:checked")').next('div').show(); }; $(document).ready(function() { showHide(); $('input:radio').change( function(){ showHide(); }); });。根据html规范

，这是无效

id = name [区分大小写]: 此属性为元素指定名称。该名称在文档中必须是唯一的。

Reference

<小时/> 更新后，采用略微改进的方法：

{{1}}

JS Fiddle demo

如何使用jQuery基于保存的单选按钮选择进行切换？

2 个答案: