jQuery实现复选框全选反选

最新推荐文章于 2022-08-29 21:58:42 发布

是啦啦啦呀

最新推荐文章于 2022-08-29 21:58:42 发布

阅读量855

点赞数

分类专栏：前端文章标签： js javascript html css3 jquery

本文链接：https://blog.csdn.net/Alfred_tfk/article/details/108370462

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery实现全选反选

html代码

<body>
  <input type="checkbox" />
  <input type="button" value="全选中" />
  <input type="button" value="全不选" />
  <input type="button" value="反选" />
  <input type="button" value="输出选中项" />
  <hr />
  <input type="checkbox" value="js" />js<br />
  <input type="checkbox" value="jq" />jq<br />
  <input type="checkbox" value="php" />php<br />
  <input type="checkbox" value="node" />node
</body>

script

<script>
  $(function () {
    //全选按钮，使所有复选框选中
    $(":button:eq(0)").click(function () {
      $(":checkbox").prop("checked", true);
    });
    //全不选按钮，使所有复选框取消选中
    $(":button:eq(1)").click(function () {
      $(":checkbox").prop("checked", false);
    });
    //反选按钮
    //1.使选中的复选框取消选中
    //2.未选中的复选框选中
    $(":button:eq(2)").click(function () {
      $(":checkbox:eq(0)").siblings(":checkbox").each(function () {//each() 方法规定为每个匹配元素规定运行的函数
        $(this).prop("checked", !$(this).prop("checked"));
      })
      xuan();
    });
    //输出选中项按钮
    $(":button:eq(3)").click(function () {
      var a = "";
      $(":checkbox:eq(0)").siblings(":checkbox").each(function () {
        if ($(this).is(":checked")) {
          a += $(this).val() + ";";
        }
      })
      console.log(a);
    });
    //全选复选框
    $(":checkbox:eq(0)").click(function () {
      if ($(":checkbox:eq(0)").is(":checked")) {//是否选中
        //					console.log($(":checkbox:eq(0)").is(":checked"))
        $(":checkbox").prop("checked", true);
      } else {
        $(":checkbox").prop("checked", false);
      }
    });
    //复选框
    $(":checkbox:eq(0)").siblings(":checkbox").click(function () {
      xuan();
    })
    //选中的方法
    var xuan = function () {
      if ($(":checkbox:eq(0)").siblings(":checkbox:checked").length == 4) {//获取被选中的多选框个数是否=4
        $(":checkbox:eq(0)").prop("checked", true);
      } else {
        $(":checkbox:eq(0)").prop("checked", false);
      }
    }

  });
</script>