Question

说我有4个复选框：

<form name="form" action="">
    <input type="checkbox" name="one" value="1" data-target="sub">1
        <br>
        <input type="checkbox" name="two" value="2" class="hidden sub">2
        <br>    
        <input type="checkbox" name="three" value="3" class="hidden sub" data-target="subsub">3
            <br>
            <input type="checkbox" name="four" value="4" class="hidden subsub">4
</form>

<style>
.hidden {
    display:none;
}
</style>

<script>
    $('input').change(function(){
    var that = $(this);
    var data = that.data('target');
    if(data) { 
        that.parent('form').children("."+data).toggleClass('hidden');
    }
</script>

第一次检查时。第二个和第三个变为可见（toggleClass（'hidden'））。这很简单。但是当你检查第3个时，第4个必须变得可见（toggleClass（'hidden'）。第2个没有任何视觉效果。

问题是：当您取消选中第1个时，3个复选框必须变为不可见，即使第3个框检查第4个也是不可见的。

我真的觉得这只隐藏的课程怎么可能？

JSFIDDLE here

修改

这必须是一个通用的解决方案。我生成HTML并希望使用通用javascript解决这个问题，而无需在脚本中编写特定的名称（变量）。我唯一能做的就是不同级别的课程。所以只对组（1），（2,3），（4）。

我也不能使用复选框的值，因为复选框可以检查与否，但仍然需要隐藏元素。这里没有线性......

Answer 1

您可以在使用.is(':checked')时检查输入.hide()并使用.show()和.trigger('change')。通过这种方式，您可以保留原始HTML结构

演示：http://jsfiddle.net/2m2w2hkp/1/

$(document).ready(function() {
    $('input').change(function(){
        var that = $(this);
        console.log(that.data('target'));
        var data = that.data('target');
        if(data) { 
            data = "."+data;
            if (that.is(':checked')) {
                that.parent('form').children(data).show();
            }
            else {
                that.parent('form').children(data).prop('checked', false);
                that.parent('form').children(data).trigger('change');
                that.parent('form').children(data).hide();
            }
        }
        console.log(data);        
    });
});

显示/隐藏嵌套复选框 - jQuery

修改

1 个答案: