08-JavaScript-实现表单全选练习

Gy-qwert

已于 2023-05-23 23:04:00 修改

阅读量62

点赞数

分类专栏： javaweb-HTML\CSS\JS\jQuery 文章标签： javascript 前端 html

于 2023-05-22 16:02:22 首次发布

本文链接：https://blog.csdn.net/qq_47128897/article/details/130795825

版权

javaweb-HTML\CSS\JS\jQuery 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

实现表单全选通常需要两个步骤：

1. 添加一个全选复选框，用于控制所有子复选框的选中状态。
2. 当全选复选框被选中或取消选中时，遍历所有子复选框并修改它们的选中状态。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表单全选示例</title>
</head>
<body>

  <form id="myForm">
    <input type="checkbox" name="fruit[]" value="apple">苹果<br>
    <input type="checkbox" name="fruit[]" value="banana">香蕉<br>
    <input type="checkbox" name="fruit[]" value="orange">橙子<br>
    <input type="checkbox" name="fruit[]" value="grape">葡萄<br>
    <input type="checkbox" name="all" id="checkAll">全选<br>
    <button type="submit">提交</button>
  </form>

  <script>
    // 获取全选复选框和子复选框元素
    let checkAll = document.getElementById('checkAll');
    let checkboxes = document.querySelectorAll('input[name="fruit[]"]');

    // 给全选复选框添加事件监听器
    checkAll.addEventListener('change', function() {
      for (let i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = checkAll.checked;
      }
    });
  </script>

</body>
</html>

以上代码中，我们首先获取了全选复选框和子复选框的元素，然后给全选复选框添加了一个 change 事件监听器。当全选复选框的状态改变时，我们遍历所有子复选框并将它们的选中状态设置为与全选复选框相同。这样就可以实现表单的全选功能了。

注意：上面示例中使用了 name="fruit[]" 来指定子复选框的名称，并且使用了 querySelectorAll 方法获取子复选框的元素。

Gy-qwert

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
08-JavaScript-实现表单全选练习

以上代码中，我们首先获取了全选复选框和子复选框的元素，然后给全选复选框添加了一个 change 事件监听器。当全选复选框的状态改变时，我们遍历所有子复选框并将它们的选中状态设置为与全选复选框相同。这样就可以实现表单的全选功能了。注意：上面示例中使用了 name="fruit[]" 来指定子复选框的名称，并且使用了 querySelectorAll 方法获取子复选框的元素。
复制链接

扫一扫