> ## Content Index
> Fetch the complete content index at: https://lucent.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Jquery实现一键全选/反选/不选
- URL: https://lucent.blog/jqueryshi-xian-yi-jian-quan-xuan-fan-xuan-bu-xuan/
- Published: 2019-08-05T07:37:32.000Z
- Updated: 2026-08-21T00:49:54.000Z
- Author: Lucent

##### 使用jQuery实现的一键全选/反选/不选

###### 页面代码：

```html
<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>
<div>
    <input type="checkbox" id="orChecked">全选/反选/全不选
</div>

```

###### js代码：

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

```