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

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> 

---第一种形式的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> 

--- SECOND FORM 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