先写一个简单的结构如下,主要看方法
<input type="checkbox" name="" id="checkboxAll" value="" />全选/全不选<br />
<input type="checkbox" name="items" id="" value="" />足球
<input type="checkbox" name="itmes" id="" value="" />篮球
<input type="checkbox" name="itmes" id="" value="" />排球
<input type="checkbox" name="itmes" id="" value="" />橄榄球<br />
<input type="button" name="" id="btn1" value="全选" />
<input type="button" name="" id="btn2" value="全不选" />
<input type="button" name="" id="btn3" value="反选" />
<input type="button" name="" id="btn4" value="提交" />
下面是用JQ写的方法
<script type="text/javascript">
var $items=$(':checkbox').not('#checkboxAll');
//全选/全不选
$('#checkboxAll').click(function(){
//console.log($items.prop('checked'))
$items.prop('checked',!$(this.prop('checked'))
});
//反选
$('#btn3').click(function(){
$items.each(function(index,val){
console.log(this.checked)//打印的是布尔值false就是没有选中 true选中
this.checked=!this.checked;
})
//当点击反选的时候,全选选框实时更新。
$('#checkboxAll').prop('checked',$items.filter(':checked').length==4)
//下面结果跟上面一样
//$('#checkboxAll').prop('checked',$items.filter(':not(:checked)').length==0)
})
//全选、全不选自动更新
$items.click(function(){
$('#checkboxAll').prop('checked',$items.filter(':checked').length==4)
})
</script>