day31-33 对于e.target的使用要小心

最新推荐文章于 2022-03-03 08:43:10 发布

RealRecall

最新推荐文章于 2022-03-03 08:43:10 发布

阅读量275

点赞数

分类专栏：初学前端开发

本文链接：https://blog.csdn.net/realrecall/article/details/111227128

版权

初学前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

这篇博客展示了如何使用JavaScript为HTML元素添加onclick事件，动态生成带有全选和单选功能的复选框。通过e.target获取触发事件的对象，并根据用户选择更新其他复选框的状态，实现全选和单选的联动交互。代码中详细解释了事件处理函数内的逻辑判断，以及如何通过DOM操作来选取和修改相关元素。

摘要由CSDN通过智能技术生成

对于onclick事件，每一次的e.target所获得的对象取决于onclick的地方。与变量不同。
实例代码：

<html>
  <body>
    <div id="region-radio-wrapper"></div>
    <div id="product-radio-wrapper"></div>
    <div id="table-wrapper"></div>
    <script>
      var checkboxDiv1 = document.querySelector("#region-radio-wrapper");
      var checkboxDiv2 = document.querySelector("#product-radio-wrapper");

      var checkboxOption1 = [
        {
          value: 1,
          text: "华东",
        },
        {
          value: 2,
          text: "华北",
        },
        {
          value: 3,
          text: "华南",
        },
      ];
      var checkboxOption2 = [
        {
          value: 1,
          text: "手机",
        },
        {
          value: 2,
          text: "笔记本",
        },
        {
          value: 3,
          text: "智能音箱",
        },
      ];
      function generate(checkboxDiv, checkboxOption) {
        var span1 = document.createElement("span");
        checkboxDiv.appendChild(span1);
        var inputAll = document.createElement("input");
        span1.textContent = "全选：";
        span1.appendChild(inputAll);
        inputAll.setAttribute("checkbox-type", "all");
        inputAll.type = "checkbox";
        for (i = 0; i < checkboxOption.length; i++) {
          var span = document.createElement("span");
          checkboxDiv.appendChild(span);
          var input = document.createElement("input");
          span.textContent = " " + checkboxOption[i]["text"] + "：";
          span.appendChild(input);
          input.setAttribute("checkbox-type", "one");
          input.type = "checkbox";
        }
        checkboxDiv.onclick = function (e) {
          var source = e.target;
          if (source.type == "checkbox") {
            var customA = source.getAttribute("checkbox-type");
            var input2 = source.parentNode.parentNode
              .querySelector("span:nth-of-type(2)")
              .querySelector("input");
            var input3 = source.parentNode.parentNode
              .querySelector("span:nth-of-type(3)")
              .querySelector("input");
            var input4 = source.parentNode.parentNode
              .querySelector("span:nth-of-type(4)")
              .querySelector("input");
            if (customA == "all") {
              if (source.checked == true) {
                if (
                  //有一个不是true
                  input2.checked != true ||
                  input3.checked != true ||
                  input4.checked != true
                ) {
                  source.checked = true;
                  input2.checked = true;
                  input3.checked = true;
                  input4.checked = true;
                }
              } else {
                e.preventDefault();
              }
            } else {
              if (
                //全是true
                input2.checked == true &&
                input3.checked == true &&
                input4.checked == true
              ) {
                inputAll.checked = true;
              }
              if (inputAll.checked == true) {
                if (
                  input2.checked != true ||
                  input3.checked != true ||
                  input4.checked != true
                ) {
                  inputAll.checked = false;//我曾经把这里写错了写成了source.checked
                }
              }
            }
          }
        };
      }
      generate(checkboxDiv1, checkboxOption1);
      generate(checkboxDiv2, checkboxOption2);
    </script>
  </body>
</html>