JS选中全部的子元素默认选中父元素|极客教程

JS选中全部的子元素默认选中父元素

简介

在使用JavaScript开发网页时，有时需要实现一种功能：当用户选中了一个或多个子元素时，父元素也要被默认选中。这种操作可以通过遍历子元素并设置父元素为选中状态来实现。

本文将详细介绍如何使用JavaScript选中全部的子元素，并默认选中父元素的实现方法。我们将使用DOM操作来实现这一功能。

代码示例

下面是一个简单的示例，演示如何选中全部的子元素，并默认选中父元素。示例中有一个父元素包含了多个子元素，当子元素被选中时，父元素添加一个选中状态。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>选中全部的子元素默认选中父元素</title>
</head>
<body>
  <div id="parent">
    <input type="checkbox" name="child" value="1">子元素1
    <input type="checkbox" name="child" value="2">子元素2
    <input type="checkbox" name="child" value="3">子元素3
    <input type="checkbox" name="child" value="4">子元素4
  </div>

  <script>
    var parent = document.getElementById('parent');
    var children = parent.getElementsByTagName('input');

    // 绑定事件监听
    parent.addEventListener('click', function(event) {
      // 检查是否点击了子元素
      if (event.target.nodeName === 'INPUT') {
        // 检查子元素是否为勾选状态
        if (event.target.checked) {
          // 默认选中父元素
          parent.classList.add('checked');
        } else {
          // 检查其他子元素是否还有勾选状态的元素，如果没有则取消选中父元素
          var hasChecked = false;
          for (var i = 0; i < children.length; i++) {
            if (children[i].checked) {
              hasChecked = true;
              break;
            }
          }
          if (!hasChecked) {
            parent.classList.remove('checked');
          }
        }
      }
    });
  </script>
</body>
</html>

在上面的代码中，我们首先获取了父元素和子元素的引用。然后，我们给父元素绑定了一个事件监听器，当点击事件发生时，会触发该事件监听器。

在事件监听器中，首先检查点击的是否是子元素，在这里我们使用了nodeName属性来判断元素的标签名是否为INPUT。如果是子元素被点击，我们再检查子元素的选中状态。