checkbox实现全选,全不选,反选。Bootstrap-用ICheck插件给CheckBox换新装!
2015-09-09 18:21
573 查看
jquery实现复选框全选全不选
终于弄明白icheck.js是如何使用的!让原本默认的又小又丑的checkbox和radio变得好看,可以设计各种颜色和样式,以后项目中再用到就非常方便了。
http://www.bubuko.com/infodetail-657629.html
http://www.bootcss.com/p/icheck/
<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/
相关文章推荐
- [Bootstrap]7天深入Bootstrap(3)CSS布局
- bootstrap v3版本icon图标不显示的解决办法!
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- Bootstrap(2)整体架构
- Bootstrap CDN推荐
- [Bootstrap]7天深入Bootstrap(2)整体架构
- 基于Metronic4.1的Bootstrap脚本样式说明
- laydate兼容bootstrap
- 8个强大的基于Bootstrap的CSS框架
- bootstrap2使用时兼容问题的解决
- 留言板——提交后台
- NIO教程----从ServerBootstrap开始
- [Bootstrap]7天深入Bootstrap(1)入门准备
- Bootstrap2使用时如何解决兼容性问题
- Bootstrap
- bootstrap2和bootstrap3的用法区别概述(四)
- bootstrap 轮播总结
- Bootstrap学习:网格系统
- Bootstrap学习: 排版
- Bootstrap学习:代码