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

【问题标题】：In jQuery How do turn a subset of checkboxes on and off based on another checkbox在jQuery中如何根据另一个复选框打开和关闭复选框的子集
【发布时间】：2011-02-17 00:11:54
【问题描述】：

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

分区一部门一部门二分区二第三部门部门四

我需要编写 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);
    });
})

谢谢

【问题讨论】：

标签： jquery

【解决方案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>

【讨论】：

非常好，为这两个类别分配了类。 - 谢谢。我想知道“立即跟随”是否有 jQuery 语法？
有，但我不建议在这种情况下使用它。让功能代码依赖于 HTML 布局是很臭的。如果你已经死定了，尽管看看siblings() 电话。
归根结底，这个解决方案对我来说效果最好，因为在页面上组织 css 后，我最终得到了 div 用于放置，这否定了兄弟概念。 - 谢谢大家！

【解决方案2】：

如果您将每个组括在<div> 中，您可以使用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);
    });
})

【讨论】：

好主意！我将如何识别这些部门？ $('input[name="division"]') ？这对表单数组有用吗？

【解决方案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);
});

【讨论】：

谢谢，我想知道如何引用表单数组的名称。