在 jQuery 中，如何根据另一个复选框打开和关闭复选框的子集

Question

我有一个用复选框显示的部门和细分列表，通过数据库动态创建，最终结果有点像这样：

<input name="divisions[]" type="checkbox" value "division1"/> Division One
    <input name="departments[]" type="checkbox" value "department1"/> Department One
    <input name="departments[]" type="checkbox" value "department2"/> Department Two

<input name="divisions[]" type="checkbox" value "division2"/> Division Two
    <input name="departments[]" type="checkbox" value "department3"/> Department Three
    <input name="departments[]" type="checkbox" value "department4"/> Department Four

我需要编写 jQuery 代码，这样当用户单击该部门的所有部门并且仅单击该部门时，我需要编写 jQuery 代码 。部门同样可以点击打开或关闭。

我正在考虑将单击事件函数附加到打开或关闭所有直接部门的所有部门，尽管我不知道语法： 从概念上我在想：

jQuery(document).ready(function() {
    $(all_elements_with_the_name_divisions).click(function() {
        $(all_immediately_following_elements_with_the_name_departments).attr('checked',this.checked);
    });
})

谢谢

Answer 1

像这样的事情应该可以解决问题。

<input type="checkbox" class="divisions" value="division1" />
<input type="checkbox" class="division1_departments" value="division1_departmen1" />
<input type="checkbox" class="division1_departments" value="division1_departmen2" />
<input type="checkbox" class="divisions" value="division2" />
<input type="checkbox" class="division2_departments" value="division2_departmen1" />
<input type="checkbox" class="division2_departments" value="division2_departmen2" />
<script type="text/javascript">
    $(document).ready(function () {
        $("input.divisions:checkbox").click(function () {
            $("input." + $(this).val() + "_departments:checkbox").attr("checked", $(this).is(':checked'));
        });
    });
</script>

Answer 2

如果将每个组包围在

中，则可以使用 siblings ()

<div>
  <input name="divisions[]" type="checkbox" value "division1"/> Division One
  <input name="departments[]" type="checkbox" value "department1"/> Department One
  <input name="departments[]" type="checkbox" value "department2"/> Department Two
</div>
<div>
  <input name="divisions[]" type="checkbox" value "division2"/> Division Two
  <input name="departments[]" type="checkbox" value "department3"/> Department Three
  <input name="departments[]" type="checkbox" value "department4"/> Department Four
</div>


jQuery(document).ready(function() {
    $('input[name="divisions\\[\\]"]').click(function() {
        $(this).siblings('input[type="checkbox"]').attr('checked',this.checked);
    });
})

Answer 3

如果您能够像这样构建标记：

<div class="division">
    <input name="divisions[]" type="checkbox" value "division1"/> Division One
        <div class="department">
        <input name="departments[]" type="checkbox" value "department1"/> Department One
        <input name="departments[]" type="checkbox" value "department2"/> Department Two
        </div>
</div>

以下代码应该执行您想要的操作：

$('.division input[name="divisions\\[\\]"]').click(function() { 
    $(this).find('.department input[type="checkbox"]').attr('checked', this.checked);
});