checkbox实现全选，全不选，反选。Bootstrap-用ICheck插件给CheckBox换新装！

本文主要是介绍checkbox实现全选，全不选，反选。Bootstrap-用ICheck插件给CheckBox换新装！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先来了解一下checkbox的checked属性。

复选框的正确使用方法：复选框选中，就为复选框增加checked属性，复选框不选中，移除checked属性。

无论复选框的checked属性是true和false，复选框都是选中的。

jquery实现复选框全选全不选

<label>1<input type="checkbox" name="check1"></label>
<label>2<input type="checkbox" name="check1" ></label>
<label for="checkall">全选<input type="checkbox" id="checkall"></label>
<label for="checkrev">反选<input type="checkbox" id="checkrev"></label>

<script>
$(function(){$("#checkall").click(function(){ //第一种方法 全选全不选if(this.checked){ $("input[name='check1']:checkbox").attr('checked',true); }else{ $("input[name='check1']:checkbox").attr('checked',false);  } */ //第二种方法 全选全不选 $('[name=check1]:checkbox').attr('checked',this.checked);//checked为true时为默认显示的状态 });$("#checkrev").click(function(){//实现反选功能$('[name=check1]:checkbox').each(function(){this.checked=!this.checked;});});	
});
</script>   

终于弄明白icheck.js是如何使用的！让原本默认的又小又丑的checkbox和radio变得好看，可以设计各种颜色和样式，以后项目中再用到就非常方便了。

<link href="css/green.css" rel="stylesheet"><script src="js/jquery.js"></script><script src="js/icheck.js"></script>

<input tabindex="1" type="checkbox" id="check-1">
<label for="input-1">Checkbox, <span>#input-1</span></label> 
<input tabindex="1" type="radio" id="radio-1" >
<label for="input-2">Checkbox, <span>#input-2</span></label>
<script>
$(document).ready(function(){$('#check-1,#radio-1').iCheck({checkboxClass: 'icheckbox_square-green',radioClass: 'iradio_square-green',increaseArea: '20%'});
});
</script> 

参考网址：

http://www.bubuko.com/infodetail-657629.html

http://www.bootcss.com/p/icheck/

这篇关于checkbox实现全选，全不选，反选。Bootstrap-用ICheck插件给CheckBox换新装！的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---