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

最新推荐文章于 2021-10-21 19:29:57 发布

HuichaoYin

最新推荐文章于 2021-10-21 19:29:57 发布

阅读量4.1w

点赞数 7

分类专栏： html+JS+Dom+JQuery 文章标签： jquery function input javascript button div

本文链接：https://blog.csdn.net/yhc0322/article/details/6786721

版权

html+JS+Dom+JQuery 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何利用jQuery为Checkbox多选框实现全选、全不选、反选的功能，通过代码实例展示了实现过程，并强调了jQuery在简化JavaScript操作中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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