js 全选框代码

以下是一个使用 JavaScript 实现全选框功能的示例代码：

HTML 部分：

<!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>

<body>
  <input type="checkbox" id="selectAll"> 全选
  <ul>
    <li><input type="checkbox" class="item"></li>
    <li><input type="checkbox" class="item"></li>
    <li><input type="checkbox" class="item"></li>
    <li><input type="checkbox" class="item"></li>
    <li><input type="checkbox" class="item"></li>
  </ul>

  <script src="script.js"></script>
</body>

</html>

JavaScript 部分（script.js）：

const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');

// 全选功能
selectAll.addEventListener('change', () => {
  items.forEach(item => {
    item.checked = selectAll.checked;
  });
});

// 监听每个子复选框的变化，如果全部未选中，则取消全选复选框的选中状态
items.forEach(item => {
  item.addEventListener('change', () => {
    const allChecked = items.length === document.querySelectorAll('.item:checked').length;
    selectAll.checked = allChecked;
  });
});

在上述代码中：

基础概念：通过 JavaScript 监听全选框和各个子复选框的状态变化事件，来实现全选和全不选的功能。
优势：操作简单直观，易于理解和实现。
应用场景：常用于多选项的选择场景，如权限设置、商品选择等。

如果遇到全选功能失效的情况，可能的原因有：

JavaScript 代码中的选择器错误，导致无法正确获取元素。
事件监听未正确添加或绑定。
存在其他 JavaScript 错误影响了代码的执行。

解决方法：

仔细检查选择器是否准确，确保能正确获取到全选框和子复选框元素。
确认事件监听的语法和逻辑是否正确。
打开浏览器的开发者工具，查看控制台是否有报错信息，并根据错误提示进行修正。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 全选框代码

相关·内容

27.尚硅谷_JS基础_代码块

腾讯云微搭低代码产品全解

在线JavaScript加密，提交JS代码、上传Zip文件

JS代码压缩，减小体积、优化逻辑、提升效率

JavaScript教程-25-JS代码的执行顺序【动力节点】

在VS Code中使用JShaman插件混淆加密JS代码

两种Eval加密，适用于JS代码加密

JavaScript教程-25-JS代码的执行顺序2【动力节点】

89. 尚硅谷_佟刚_JavaWEB_文件上传案例_JS代码.wmv

JShaman本地部署英文版，测试加密700K的JS代码

1. 尚硅谷_佟刚_JavaScript DOM编程_在什么位置编写 JS 代码.wmv

1. 尚硅谷_佟刚_JavaScript DOM编程_在什么位置编写 JS 代码.wmv

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐