兩個互不相互影響的多層複選框系統

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