表单全选、全不选与反选以及悬浮行背景色

码马迷Allen

已于 2022-10-31 09:53:32 修改

阅读量218

点赞数

分类专栏： javascript 文章标签： javascript css css3 vscode

于 2022-10-31 09:53:24 首次发布

本文链接：https://blog.csdn.net/Fsallen_hu/article/details/127609507

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全选反选</title>
</head>
<style>
  table {
    border: 1px solid;
    margin: auto;
    width: 500px;
  }
  td,
  th {
    text-align: center;
    border: 1px solid;
  }
  div {
    text-align: center;
    margin: 50px;
  }
  /*下方为第二种样式方法专用的over与out样式*/
  .over {
    background-color: pink;
  }
  .out {
    background-color: white;
  }
</style>
<body>
  <table>
    <caption>学生信息表</caption>
    <tr>
      <th><input type="checkbox"></th>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>1</td>
      <td>令狐冲</td>
      <td>男</td>
      <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>2</td>
      <td>独孤求败</td>
      <td>女</td>
      <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>3</td>
      <td>白发魔女</td>
      <td>女</td>
      <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>4</td>
      <td>杨过</td>
      <td>男</td>
      <td><a href="javascript:void(0);">删除</a></td>
    </tr>
  </table>
  <div>
    <div>
      <input type="button" value="全选" id="selectall">
      <input type="button" value="全不选" id="unselectall">
      <input type="button" value="反选" id="selectRev">
    </div>
</body>
<script>
  //在页面加载完后绑定事件
  onload = () => {
    var flag = false;
    var element_input = document.getElementsByTagName("input");
      /*
      分析：
 全选按钮
        获取所有的checkbox:-----全局变量element_input
        遍历checkbox，设置每一个cb的状态为选中,属性：checked为true
      */
    document.getElementById("selectall").onclick = function (event) {
      for (let index = 0; index < element_input.length; index++) {
        const element = element_input[index];
        if (element.type == "checkbox") {
          element.checked = true;
        }
      }
    }
    /*
全不选按钮
    获取所有的checkbox
    遍历所有checkbox，设置每一个cb的状态为非选中状态，属性：checked为false
    */
    document.getElementById("unselectall").onclick = function (event) {
      for (let index = 0; index < element_input.length; index++) {
        const element = element_input[index];
        element.checked = false;
      }
    };
    /*
反选按钮
    获取所有的checkbox
    遍历所有checkbox，设置每一个CB的状态，反向选择，判断属性：true改为fasle，fasle改为true
    */
    document.getElementById("selectRev").onclick = function (event) {
      for (let index = 1; index < element_input.length; index++) {
        const element = element_input[index];
        // if (element.checked == true) {
        //   element.checked = false;
        // } else {
        //   element.checked = true;
        // }
        element.checked = !element.checked;
        arr[index - 1] = element.checked;
      };
      if (arr.includes(true)) {
        element_input[0].checked = true;
      } else {
        element_input[0].checked = false;
      }
    };
    /*    
标题复选框点击全选全不选事件
    首行复选框的功能分析
    4.1、选中，则所有选中
    4.2、非选中，则所有非选中
    获取所有的checkbox
    遍历所有checkbox，设置每一个CB的状态，反向选择，判断属性：true改为fasle，fasle改为true
    遍历除了第一个checkbox的其他checkbox，其中一个被选中则第一个checkbox选中(onclick)，并灰色底，所有都不选中则第一个不选中
    */
    element_input[0].onchange = function (event) {
      if (element_input[0].checked == true) {
        for (let index = 1; index < element_input.length; index++) {
          const element = element_input[index];
          element.checked = true;
        }
      } else {
        for (let index = 1; index < element_input.length; index++) {
          const element = element_input[index];
          if (element.type == "checkbox") {
            element.checked = false;
          }
        }
      }
    }
    /*
表体选中（部分选中时）第一个CB自动打勾(自创)
分析：
遍历所有cb；存入array数组
选中行打勾，则第一个CB自动打勾
选中行取消勾，则判断是否所有都已经勾，第一个CB自动取消勾。否则不变
    */
    var arr = new Array();
    for (let i = 1; i < element_input.length; i++) {
      const element = element_input[i];
      if (element.type == "checkbox") {
        element.onchange = function () {
          arr[i - 1] = element.checked;
          if (arr.includes(true)) {
            element_input[0].checked = true;
          } else {
            element_input[0].checked = false;
          }
        }
      }
    }
    /*
鼠标悬浮变颜色
    给所有tr绑定鼠标移到元素之上和移除元素之上事件
    先获取所有tr元素的集合
    集合中添加鼠标悬浮事件
    */
    var trs = document.getElementsByTagName("tr");
    for (let index = 1; index < trs.length; index++) {
      const element = trs[index];
      //移到元素之上的事件
      element.onmouseover = function () {
        //element.style.background = "pink";//第一种方法
        this.className = "over";//第二种方法，但要在body标签上方添加<style>元素标签并编写over的样式
      };
      //移出元素之后的事件
      element.onmouseout = function () {
        //element.style.background = "white"
        this.className = "out";//第二种方法，但要在body标签上方添加<style>元素标签并编写over的样式
      };
    }
  }
</script>
</html>

最终效果：================