JavaScript 实现全选、不全选、反选功能（有详细注释）

最新推荐文章于 2024-04-02 19:39:43 发布

小小前端_可笑可笑

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量375

点赞数

分类专栏：前端文章标签： javascript js checkbox html5 前端

本文链接：https://blog.csdn.net/weixin_44901846/article/details/106308135

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript 实现全选、不全选、反选功能

一、我们需要考虑的点

获取元素对象（DOM查询）
判断哪些checkbox被选择（checkboxObject.checked）
全选时将所有选项都选上（设置judAllOrNot变量用于判断选择个数）
不全选时将所有选项撤销
反选时如何实现（checkboxObject.checked = ! checkboxObject.checked）
点击每一小项时判断是否已经被全选或全不选（全选：judAllOrNot === 0，全不选：judAllOrNot === inputs.length）
反选时判断是否全选或不全选（judAllOrNot = inputs.length - judAllOrNot）

二、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <p>你喜欢的水果是？</p>
    <div>
      <input type="checkbox" id="allOrNot"/>全选 or 全不选
    </div>
    <div>
      <input type="checkbox" name="items" value="苹果"/>苹果
      <input type="checkbox" name="items" value="橙子"/>橙子
      <input type="checkbox" name="items" value="李子"/>李子
      <input type="checkbox" name="items" value="香蕉"/>香蕉
    </div>
    <div>
      <button id="btn1">全选</button>
      <button id="btn2">全不选</button>
      <button id="btn3">反选</button>
      <button id="btn4">提交</button>
    </div>
  </div>

  <script>
    var inputs = document.getElementsByName("items"); // 获取四个水果选项到inputs数组
    var judAllOrNot = 0;  // 用于记录被选中的个数，方便判断是否全选与否
    for(var i = 0; i < inputs.length; i++) {
      inputs[i].onclick = function() {  // 给所有checkbox都设置onclick事件
        if(this.checked) {  // 当前checkbox被选中则judAllOrNot加一个。
          judAllOrNot++;
        } else {  // 当前checkbox被撤销选中则judAllOrNot减一个。
          judAllOrNot--;
        }
        if(judAllOrNot === inputs.length) { // 选中的个数和可选个数相同
          allOrNot.checked = true;
        } else {  // 选中的个数和可选个数不相同
          allOrNot.checked = false;
        }
      }
    };

    var allOrNot = document.getElementById("allOrNot"); // 全选or不全选
    allOrNot.onclick = function() { // 给全选or不全选checkbox设置onclick事件
      for(var i = 0; i < inputs.length; i++) {
        inputs[i].checked = this.checked; // 所有选项都选上
      }
    };

    var btn1 = document.getElementById("btn1"); // 全选button
    btn1.onclick = function() {
      allOrNot.checked = true;  // 全选or不全选checkbox选上
      for(var i = 0; i < inputs.length; i++) {
        inputs[i].checked = true;  // 全都选上
      }
    };

    var btn2 = document.getElementById("btn2"); // 不全选button
    btn2.onclick = function() {
      allOrNot.checked = false; // 全选or不全选checkbox撤销选择
      for(var i = 0; i < inputs.length; i++) {
        inputs[i].checked = false;  // 全不选
      }
    };

    var btn3 = document.getElementById("btn3"); // 反选button
    btn3.onclick = function() {
      judAllOrNot = inputs.length - judAllOrNot;  // 判断选择个数反转
      if(judAllOrNot === 0) { // 特判是否没有一个选项被选
        allOrNot.checked = false; // 将全选or不全选checkbox撤销选择
      }
      if(judAllOrNot === inputs.length) { // 特判是否全选
        allOrNot.checked = true;  // 将全选or不全选checkbox选上
      }
      for(var i = 0; i < inputs.length; i++) {
        inputs[i].checked = !inputs[i].checked; // 所有选项反转
      }
    };

    var btn4 = document.getElementById("btn4"); // 提交button
    btn4.onclick = function() {
      var str = ""; // 存放待会儿要显示的文字
      for(var i = 0; i < inputs.length; i++) {
        if(inputs[i].checked) { // 提取被选中的项的value值
          str += inputs[i].value + "   ";
        }
      }
      alert(str); // 通过alert()方法显示给用户
    };
  </script>
</body>
</html>

三、一点备注

直接粘贴代码到html文件中即可运行。

小小前端_可笑可笑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实现全选、不全选、反选功能（有详细注释）

JavaScript 实现全选、不全选、反选功能一、我们需要考虑的点二、代码实现三、一点备注一、我们需要考虑的点获取元素对象判断哪些checkbox被选择全选时将所有选项都选上不全选时将所有选项撤销反选时如何实现点击每一小项时判断是否已经被全选或全不选反选时判断是否全选或不全选二、代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
复制链接

扫一扫