600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 用Jquery实现checkbox的反选 全选 全不选

用Jquery实现checkbox的反选 全选 全不选

时间:2020-04-20 23:04:10

相关推荐

用Jquery实现checkbox的反选 全选 全不选

当我们在用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控件。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。