怎么使用JavaScript实现全选功能

本篇内容主要讲解“怎么使用JavaScript实现全选功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用JavaScript实现全选功能”吧!

十多年的滨城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整滨城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“滨城网站设计”,“滨城网站推广”以来，每个客户项目都认真落实执行。

一、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都会被自动勾选上：

怎么使用JavaScript实现全选功能