已經選中的複選框要取消選中並取消選中複選框要使用jQuery中的主複選框檢查

Question

我有一個主複選框，並且在它下面有一組複選框，其中一些已經選中，其中一些未選中。我的查詢是如果我將檢查主複選框，然後已經檢查複選框要取消選中，並取消選中複選框要檢查。

如：

Answer 1

隨着prop()方法

$('#master').on('click', function() { 
 
    $('.branch').each(function(){ 
 
     $(this).prop('checked',!$(this).prop('checked')) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="master">master</br> 
 
<input type="checkbox" class="branch">1 
 
<input type="checkbox" class="branch">2 
 
<input type="checkbox" class="branch" checked>3 
 
<input type="checkbox" class="branch">4 
 
<input type="checkbox" class="branch">5 
 
<input type="checkbox" class="branch" checked>6 
 
<input type="checkbox" class="branch">7 
 
<input type="checkbox" class="branch">8 
 
<input type="checkbox" class="branch" checked>9

Answer 2

根據您的查詢

如果我將檢查主複選框則已經選中複選框要取消和未選中複選框要檢查

試試吧，它會工作

$('#master').on('click', function() { 
 
if($(this).is(':checked')){ 
 
     $('.branch').trigger('click'); 
 
    }    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="master">master</br> 
 
<input type="checkbox" class="branch">1 
 
<input type="checkbox" class="branch">2 
 
<input type="checkbox" class="branch" checked>3 
 
<input type="checkbox" class="branch">4 
 
<input type="checkbox" class="branch">5 
 
<input type="checkbox" class="branch" checked>6 
 
<input type="checkbox" class="branch">7 
 
<input type="checkbox" class="branch">8 
 
<input type="checkbox" class="branch" checked>9

Answer 3

而不觸發所有輸入，試試這個：

var masterCheckbox = jQuery("#master"); 
 
      
 
masterCheckbox.on("change", function() 
 
{ 
 
    if(masterCheckbox.is(":checked")) 
 
    { 
 
    var checkboxes = jQuery(".myCheckbox"); 
 

 
    //get all checked and unchecked 
 
    var checked = checkboxes.filter(":checked"); 
 
    var notchecked = checkboxes.filter(":not(:checked)"); 
 

 
    checked.prop("checked", false); 
 

 
    notchecked.prop("checked", true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="master" /> 
 
<br> 
 
<input type="checkbox" class="myCheckbox" checked /> 
 
<input type="checkbox" class="myCheckbox" /> 
 
<input type="checkbox" class="myCheckbox" checked /> 
 
<input type="checkbox" class="myCheckbox" />