已经选中的复选框要取消选中并取消选中复选框要使用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" />