先来了解一下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/