javaScript checkbox 全选/反选及批量删除

下面我来详细讲解一下“JavaScript checkbox 全选/反选及批量删除”的完整攻略。

核心思路

JavaScript实现checkbox全选/反选及批量删除的核心思路如下：

获取页面上所有的checkbox元素，并添加相应的事件监听函数；
创建一个“全选”checkbox元素，点击全选时，遍历所有checkbox，将它们的checked属性设置为全选checkbox的checked属性值；
创建一个“反选”checkbox元素，点击反选时，遍历所有checkbox，将它们的checked属性设置为 !checkbox.checked；
获取删除按钮元素，监听它的点击事件，并在点击时遍历所有checkbox，将选中的checkbox所对应的数据进行删除。

示例代码

示例1：全选/反选

下面是实现全选/反选的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>全选/反选示例</title>
    <script>
      function selectAll() {
        var all = document.getElementById('all');
        var checkboxes = document.querySelectorAll('input[type="checkbox"]');
        for (var i = 0; i < checkboxes.length; i++) {
          checkboxes[i].checked = all.checked;
        }
      }

      function invert() {
        var checkboxes = document.querySelectorAll('input[type="checkbox"]');
        for (var i = 0; i < checkboxes.length; i++) {
          checkboxes[i].checked = !checkboxes[i].checked;
        }
      }
    </script>
  </head>
  <body>
    <label><input type="checkbox" name="check1">选项1</label>
    <label><input type="checkbox" name="check2">选项2</label>
    <label><input type="checkbox" name="check3">选项3</label>
    <label><input type="checkbox" name="check4">选项4</label>
    <hr>
    <label><input type="checkbox" id="all" onchange="selectAll()">全选</label>
    <label><input type="checkbox" onchange="invert()">反选</label>
  </body>
</html>

注意以上代码中的两个自定义函数 selectAll() 和 invert()，它们分别实现了全选和反选的功能。其中 selectAll() 函数中，我们使用了 querySelectorAll() 函数获取页面上所有的checkbox元素，并且在遍历时，将它们的checked属性设置为“全选”checkbox元素的checked属性值。

示例2：批量删除

下面是实现批量删除的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>批量删除示例</title>
    <script>
      function deleteSelected() {
        var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
        for (var i = 0; i < checkboxes.length; i++) {
          // 删除checkbox对应的数据
          var data = checkboxes[i].parentNode.textContent.trim();
          console.log('删除数据：', data);
          // 从DOM中删除checkbox
          checkboxes[i].parentNode.remove();
        }
      }
    </script>
  </head>
  <body>
    <ul>
      <li><label><input type="checkbox">选项1</label></li>
      <li><label><input type="checkbox">选项2</label></li>
      <li><label><input type="checkbox">选项3</label></li>
      <li><label><input type="checkbox">选项4</label></li>
      <li><label><input type="checkbox">选项5</label></li>
    </ul>
    <hr>
    <button onclick="deleteSelected()">删除选中项</button>
  </body>
</html>

以上代码中，我们使用了 querySelectorAll() 函数获取所有被选中的checkbox，然后遍历这些checkbox，并将其对应的数据从DOM中删除。以上示例中，我们使用了ul-li列表，每个li元素中都嵌套了一个checkbox和一个文本节点。我们通过遍历被选中的checkbox的parentNode，以获取其对应的文本节点，从而可以删除它们所对应的数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javaScript checkbox 全选/反选及批量删除 - Python技术站

javaScript checkbox 全选/反选及批量删除

核心思路

示例代码

示例1：全选/反选

示例2：批量删除

相关文章