两个不相互交互的多层复选框系统

Question

我正在尝试创建两个不相互交互的复选框系统。我面临的问题是主“全选”框选择了整个文档中的所有复选框，最终从两个表单中选择了所有复选框。

有没有什么方法可以保留所有功能但又保持表单完全分离？

--- 第一式 JAVASCRIPT ---

<script>
$(function () {
  $('#checkAll').on('click', function () {
    $(document).find(':checkbox').prop('checked', this.checked);
  });
});
</script>
<script>
$(function () {
  $(".checkall").click(function () {
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
});
</script>

--- 第二种形式的 JAVASCRIPT ---

<script>
$(function () {
  $('#checkAll2').on('click', function () {
    $(document).find(':checkbox').prop('checked', this.checked);
  });
});
</script>
<script>
$(function () {
  $(".checkall2").click(function () {
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
});
</script>

--- FIRST FORM HTML ---

<center><input type="checkbox" name="checkAll" id="checkAll"></center><br/>             
<div class="row">                   
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall"> IT Dept</div><br>
           <div><input type="checkbox"> number 1</div>
           <div><input type="checkbox"> number 2</div>
           <div><input type="checkbox"> number 3</div>
           <div><input type="checkbox"> number 4</div>
        </fieldset>             
    </div>
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall"> Marketing</div><br>
            <div><input type="checkbox"> number 1</div>
            <div><input type="checkbox"> number 2</div>
            <div><input type="checkbox"> number 3</div>
            <div><input type="checkbox"> number 4</div>
            <div><input type="checkbox"> number 5</div>
            <div><input type="checkbox"> number 6</div>
        </fieldset> 
    </div>            
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall"> Finance</div><br>
            <div><input type="checkbox"> number 1</div>
            <div><input type="checkbox"> number 2</div>
            <div><input type="checkbox"> number 3</div>
            <div><input type="checkbox"> number 4</div>
        </fieldset> 
    </div>      
</div>  

--- 第二种形式的 HTML ---

<center><input type="checkbox" name="checkAll" id="checkAll2"></center><br/>                
<div class="row">                   
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall2"> IT Dept</div><br>
           <div><input type="checkbox"> number 1</div>
           <div><input type="checkbox"> number 2</div>
           <div><input type="checkbox"> number 3</div>
           <div><input type="checkbox"> number 4</div>
        </fieldset>             
    </div>
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall2"> Marketing</div><br>
            <div><input type="checkbox"> number 1</div>
            <div><input type="checkbox"> number 2</div>
            <div><input type="checkbox"> number 3</div>
            <div><input type="checkbox"> number 4</div>
            <div><input type="checkbox"> number 5</div>
            <div><input type="checkbox"> number 6</div>
        </fieldset> 
    </div>            
    <div class="col-md-4 col-sm-4">
        <fieldset><div><input type="checkbox" class="checkall2"> Finance</div><br>
            <div><input type="checkbox"> number 1</div>
            <div><input type="checkbox"> number 2</div>
            <div><input type="checkbox"> number 3</div>
            <div><input type="checkbox"> number 4</div>
        </fieldset> 
     </div>     
</div>  

Answer 1

您可以在两个表单中添加一个容器，然后修改您的 js 以分别检查组。

$(function () {
  $('.groupCheckAll').on('click', function () {
    $(this).closest(".group").find(':checkbox').prop('checked', this.checked);
  });
});
$(function () {
  $(".checkall").click(function () {
    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
  });
});

你可以在fiddle查看工作代码

Answer 2

试试这个：

$(function() {
    $('#checkAll, #checkAll2').on('click', function() {
        $(this).parent().next().next().find(':checkbox').prop('checked', this.checked);
    });
});

jsFiddle