最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我

在线咨询
x
有什么可以帮到你

点击咨询
JQuery 实现checkbox全选功能和全不选功能
- 分类:WEB前端
- 时间:2018-05-06
- 共573人围观
简介JQuery 实现checkbox全选功能和全不选功能,我们经常在项目开发中用到这个功能,特意记录下来,方便随时使用
JQuery 实现checkbox全选功能和全不选功能,我们经常在项目开发中用到这个功能,特意记录下来,方便随时使用
一、HTML代码如下:
<!--设置全选复选框--> <input id="check-all" name="check-all" type="checkbox" />全选 <!--设置子复选框--> <input name="check-one" type="checkbox" />item 1 <input name="check-one" type="checkbox" />item 2 <input name="check-one" type="checkbox" />item 3 <input name="check-one" type="checkbox" />item 4
二、js 代码如下:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> //全选、取消全选的事件 $('#check-all').click(function () { if ($("#check-all").prop("checked")) { $("input[type='checkbox'][name='check-one']").prop("checked",true); //全选 } else { console.log(3); $("input[type='checkbox'][name='check-one']").prop("checked",false); //取消全选 } }); //子复选框的事件 $($("input[type='checkbox'][name='check-one']")).click(function () { //当没有选中某个子复选框时,SelectAll取消选中 if (!$(this).checked) { $("#check-all").prop("checked", false); } var chsub = $("input[type='checkbox'][name='check-one']").length; //获取subcheck的个数 var checkedsub = $("input[type='checkbox'][name='check-one']:checked").length; //获取选中的subcheck的个数 if (checkedsub == chsub) { $("#check-all").prop("checked", true); } }) </script>