javascript全选取消

时间：2023-05-16 15:40

JavaScript是一种广泛使用的脚本语言，常被用于前端网页开发。在网页开发中，经常会涉及到全选和取消全选功能的实现，这时我们通常需要用到JavaScript。本文将介绍如何使用JavaScript实现全选和取消全选功能。

一、HTML代码

在实现全选和取消全选功能之前，我们需要先写好HTML代码。下面是一个示例的HTML代码，包括表格头部和内容：

<div class="tableContainer">  <table>    <thead>      <tr>        <th><input type="checkbox" id="selectAll"/>全选</th>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>      </tr>    </thead>    <tbody>      <tr>        <td><input type="checkbox" class="checkbox"/></td>        <td>张三</td>        <td>20</td>        <td>男</td>      </tr>      <tr>        <td><input type="checkbox" class="checkbox"/></td>        <td>李四</td>        <td>25</td>        <td>男</td>      </tr>      <tr>        <td><input type="checkbox" class="checkbox"/></td>        <td>王五</td>        <td>30</td>        <td>女</td>      </tr>    </tbody>  </table></div>

在表格头部，我们添加了一个全选的checkbox，设置其id为“selectAll”，其他行中每一行的第一个单元格中也添加了一个checkbox，设置其class为“checkbox”。

二、JavaScript代码

接下来，我们需要编写JavaScript代码来实现我们的功能。我们需要为表格头部的全选checkbox和每一行的checkbox添加事件，实现全选和取消全选的功能。以下是JavaScript代码：

<script>  // 获取表格头部的全选checkbox  var selectAll = document.getElementById("selectAll");  // 获取每一行中的checkbox  var checkboxes = document.getElementsByClassName("checkbox");   // 给表格头部的全选checkbox绑定点击事件  selectAll.onclick = function() {    // 循环遍历每一行的checkbox    for(var i=0; i < checkboxes.length; i++) {      // 将每一行的checkbox的选中状态设置为表格头部的全选checkbox的选中状态      checkboxes[i].checked = selectAll.checked;    }  }   // 循环遍历每一行的checkbox  for(var i=0; i < checkboxes.length; i++) {    // 给每一个checkbox绑定点击事件    checkboxes[i].onclick = function() {      // 定义一个变量，表示是否所有行中的checkbox都被选中      var isCheckedAll = true;      // 循环遍历每一行的checkbox      for(var j=0; j < checkboxes.length; j++) {        // 如果有一个checkbox没有被选中，将isCheckedAll设置为false        if(!checkboxes[j].checked) {          isCheckedAll = false;          break;        }      }      // 将表格头部的全选checkbox的选中状态设置为isCheckedAll      selectAll.checked = isCheckedAll;    }  }</script>

三、实现效果

在HTML和JavaScript代码都完成后，我们就可以实现全选和取消全选的功能了。

当用户勾选表格头部的全选checkbox时，所有行中的checkbox都会被自动勾选上：