jquery one-click method to control checkbox selection, inverse selection, and deselection

The jquery attr() method may cause problems when obtaining the checked tag, so the prop() method is used.

Hml's checkbox does not add a name, only p nesting is used.

If there is a better method, please give it!!

//全选$('#allChecked').change(function(){
     $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});

//反选$('#invertChecked').change(function(){  
        if($(this).is(':checked')){
     $('#box').children(':checkbox').each(function(){
       $(this).prop('checked',$(this).is(':checked')?false:true);
     });
  }
});

//一键控制全选、反选、全不选
$('#orChecked').change(function(){
  if($(this).is(':checked')){
     var box = $('#box').children(':checkbox');
     if(box.length==box.filter(':not(:checked)').length){    // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
     $('#box').children(':checkbox').prop('checked',true);
  }else{     // 如果有选中个数，-> 反选 
     $('#box').children(':checkbox').each(function(){     
        $(this).prop('checked',$(this).is(':checked')?false:true);
     });
  }else{
      $('#box').children(':checkbox').prop('checked',false);    // 如控制键取消选中，剩余的checkbox也取消选中
  }
    
});

<div align="center">
          
      <div id="box">
          <input type="checkbox" value="1">西瓜
          <input type="checkbox" value="2">芒果
          <input type="checkbox" value="3">橙
          <input type="checkbox" value="4">山竹
          <input type="checkbox" value="5">草莓
          <input type="checkbox" value="6">火龙果
      </div>    
              
      <br>
              
      <input type="checkbox" id="allChecked">全选
      <input type="checkbox" id="invertChecked">反选
      <input type="checkbox" id="orChecked">全选/反选/全不选
              
  </div>

If there is a better method, please give it!!

The above is the detailed content of jquery one-click method to control checkbox selection, inverse selection, and deselection. For more information, please follow other related articles on the PHP Chinese website!