根据另一个复选框显示隐藏复选框答案

【问题标题】：Show Hide Check boxes depending on another check boxes根据另一个复选框显示隐藏复选框
【发布时间】：2015-07-26 03:41:54
【问题描述】：

我是网络开发的新手，所以请不要给这个问题留下任何负面评价。如果您不喜欢这个问题，请将其留给希望回答的其他人。

有 2 个复选框组“主”和“子”。

如果用户从 'main' 中选择 'Main_CheckBox_1' 需要显示 'Sub_Checkbox_1_Main_1' 和 'Sub_Checkbox_2_Main_1 '来自'子'
如果用户选择“Main_CheckBox_2”，则需要显示“Sub_Checkbox_1_Main_2”和“Sub_Checkbox_2_Main_2”

<div id = "mainDiv" >   
    <input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_1</span> <br/>
    <input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
    <input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
</div>

<div id = "subDiv" >    
    <input type="checkbox" name="sub" value="Sub_1_of_main_1"><span>Sub_Checkbox_1_Main_1</span> <br/>
    <input type="checkbox" name="sub" value="Sub_2_of_main_1"><span>Sub_Checkbox_2_Main_1</span><br/>
    <input type="checkbox" name="sub" value="Sub_1_of_main_2"><span>Sub_Checkbox_1_Main_2</span><br/>
    <input type="checkbox" name="sub" value="Sub_2_of_main_2"><span>Sub_Checkbox_2_Main_2</span><br/>
    <input type="checkbox" name="sub" value="Sub_1_of_main_3"><span>Sub_Checkbox_1_Main_3</span><br/>
    <input type="checkbox" name="sub" value="Sub_2_of_main_3"><span>Sub_Checkbox_2_Main_3</span><br/>
</div>

1.如何识别从'main'中选择了哪个复选框？

2。如何根据“主”复选框显示/隐藏“子”中的复选框？

谢谢你

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

1) 为所有名称为 main input[name='main'] 的输入提供触发器以对更改采取行动。然后this.value 会告诉你具体哪一个被改变了。

2) 创建一个以this.value为参数的函数，然后切换（隐藏/显示）两个对应的复选框和下一个元素（）

$(document).ready(function() {
    $("input[name='main']").change(function() {
        showHide(this.value);
    });
});

function showHide (chkbx) {
     var k = "input[value='Sub_1_of_"+chkbx+"']";
     $(k).toggle(0);
     $(k).next().toggle(0);
     var k = "input[value='Sub_2_of_"+chkbx+"']";
     $(k).toggle(0);
     $(k).next().toggle(0);
}

【讨论】：

【解决方案2】：

如果您将子复选框分组如下，会更容易。在加载过程中使用 CSS 隐藏所有组。这将产生更清洁和可读的 DOM/代码。

$(function() {
    var $groups = $("#subDiv .group");
    $('#mainDiv :checkbox').on("change", function() {
        var index = parseInt($(this).val().slice(-1), 10) - 1;
        $groups.eq(index).toggle(this.checked).siblings().hide();
    });
});

#subDiv .group {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "mainDiv" >   
    <input type="checkbox" name="main" value="main_1" /><span>Main_CheckBox_1</span> <br/>
    <input type="checkbox" name="main" value="main_2" /><span>Main_CheckBox_2</span><br/>
    <input type="checkbox" name="main" value="main_3" /><span>Main_CheckBox_3</span><br/>
</div>

<div id = "subDiv" >
    <div class="group">
        <input type="checkbox" name="sub" value="Sub_1_of_main_1" /><span>Sub_Checkbox_1_Main_1</span> <br/>
        <input type="checkbox" name="sub" value="Sub_2_of_main_1" /><span>Sub_Checkbox_2_Main_1</span><br/>
    </div>
    <div class="group">
        <input type="checkbox" name="sub" value="Sub_1_of_main_2" /><span>Sub_Checkbox_1_Main_2</span><br/>
        <input type="checkbox" name="sub" value="Sub_2_of_main_2" /><span>Sub_Checkbox_2_Main_2</span><br/>
    </div>
    <div class="group">
        <input type="checkbox" name="sub" value="Sub_1_of_main_3" /><span>Sub_Checkbox_1_Main_3</span><br/>
        <input type="checkbox" name="sub" value="Sub_2_of_main_3" /><span>Sub_Checkbox_2_Main_3</span><br/>
    </div>
</div>

【讨论】：