Question

我对网络开发完全陌生，所以请不要在此问题上留下任何负面影响。如果你不喜欢这个问题，请留下另一个希望回答的人。

有两个复选框组＆＃39; main＆＃39; ＆安培; ＆＃39;子

如果用户选择＆＃39; Main_CheckBox_1 ＆＃39;来自＆＃39; 主要＆＃39;需要显示＆＃39; Sub_Checkbox_1_Main_1 ＆＃39;和＆＃39; Sub_Checkbox_2_Main_1 ＆＃39;来自＆＃39; sub ＆＃39;
如果用户选择＆＃39; Main_CheckBox_2 ＆＃39;需要显示＆＃39; Sub_Checkbox_1_Main_2 ＆＃39; ＆安培; ＆＃39;的 Sub_Checkbox_2_Main_2 ＆＃39;

<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。如何识别从＆＃39; main＆＃39;中选择的复选框。吗

2。如何显示/隐藏＆＃39; sub＆＃39;中的复选框取决于＆＃39; main＆＃39;复选框？

谢谢你

Answer 1

1）为名称为主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);
}

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

根据其他复选框显示隐藏复选框

2 个答案: