当我们在用JS来实现web端操作的时候,多选框的全选、全不选和反选是最常用的功能,尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。
下面我们就来用JQuery实现checkbox多选框的全选、全不选、反选的功能:
假设有4个checkbox多选框,他们包含在一个id=“chk”的div中,而全选、全不选、反选的button按钮所在标签的id分别为btnAllChk、btnAllNotChk、btnInvert。
具体代码如下:
$(function () {
//全不选
$("#btnAllNotChk").click(function () {
$("#chk input:checkbox").removeAttr("checked");
});
//全选
$("#btnAllChk").click(function () {
$("#chk input:checkbox").attr("checked", "checked");
});
//反选
$("#btnInvert").click(function () {
//1.方法一实现反选
$("#chk input:checkbox").each(function () {
this.checked = !this.checked;
})
//2.方法二实现反选
// $("#chk input:checkbox").each(function (){
// if ($(this).attr("checked")) {
// $(this).attr("checked", false);
// }
// else {
// $(this).attr("checked", "checked");
// }
// })
//3.方法三实现反选
// var $cks = $("#chk input:checkbox");
// for (var i = 0; i < $cks.length; i++) {
// $cks.get(i).checked = !$cks.get(i).checked;
// }
});
})
这样我们就实现了checkbox的全选、反选、全不选操作
注意:1.Jquery本身就是由javascript代码堆积而成的;
2.使用Jquery语句前先导入Jquery控件。
分享到:
相关推荐
jquery Checkbox 全选 反选 全不选 多种实现方法 和表单验证
Jquery全选反选Checkbox 简单好用 复用性很好 欢迎下载
NULL 博文链接:https://xdwangiflytek.iteye.com/blog/1343416
jquery、js操作checkbox全选反选.docx
页面上通过一个checkbox实现全选与反选
jquery实现checkbox全选、反选、全部选,很不错的资源,欢迎大家下载学习var langType=""; var arLangType = []; $("[name='langType'][checked]").each(function(i) { arLangType[i]=$(this).val(); }); ...
jQuery实现复选框checkbox的全选与反选功能,不用多介绍了吧,以往都是基于纯js的实现比较多,这个是引入了jquery,或许更能满足现在的前端设计吧。
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" ...
使用jquery实现 checkbox的 全选,反选
checkbox使用jquery全选-反选-取得选中的值-完整的例子
jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。 Hml的checkbox没有加name,只用了 div 嵌套。 如有更好的方法,望指点!! //全选 $('#allChecked').change(function(){ $('#box').children...
主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明,需要的朋友可以参考下
用jquery实现的checkbox全选和反选代码,需要的朋友可以参考下。
自动动手写了个操作checkbox,里面包括全选、全不选、反选、获取选中值四个功能...
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id...
jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): <input type="checkbox" name="fruit" value="apple" />苹果 <input ...
本代码是在众多的jQuery复选框功能代码中精选出来的,本人项目中使用的代码,这里分享给大家。 jQuery代码: 代码如下: $(function(){ $(“#checkedAll”).click(function(){ $(‘[name=items]:checkbox’)...