您的位置:首页 > Web前端 > BootStrap

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

2015-09-09 18:21 573 查看
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/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: