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

Showing/hiding nested checkboxes - jQuery

本文关键字：复选框 -jQuery 嵌套 隐藏 显示      更新时间：2023-09-26

假设我有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>

第一次检查时。第2个和第3个变为可见（toggleClass（"隐藏"））。这很简单。但当您选中第三个时，第四个必须可见（toggleClass（'hidden'）。第二个没有任何视觉效果。

问题是：当您取消选中第一个复选框时，3个复选框必须变为不可见，即使第四个复选框通过选中第三个复选框可见。

我真的不明白，只有隐藏类怎么可能？

JSFIDDLE此处

编辑

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

我也不能使用复选框的值，因为复选框可以被选中也可以不被选中，并且仍然必须隐藏一个元素。这里没有线性。。。

您可以在使用.trigger('change')时检查输入.is(':checked')和使用.hide()和.show()。这样你就可以保留你原来的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);        
    });
});

如果.find（）是顶级的（添加ID或使用数据目标），你能使用它吗？

类似于（如果顶部复选框的id为"checkbox1"：

if (that.attr("id") == "checkbox1")
{
    that.parent("form").find("input").each(function(){
    	if ($(this).attr("id") != "checkbox1")
    	{
    		$(this).addClass("hidden");
    	}
    });
}

在不测试它的情况下，如果checkbox1被选中，它会将"隐藏"类添加到表单中的所有输入元素，而不会将其添加到"checkbox1"

相关文章：