本文主要是介绍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换新装!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!