主页 / user-11224185

nammae88's questions

Martin Hope
nammae88
Asked: 2024-08-29 17:25:15 +0800 CST
  • 8

我尝试实现一个有 5 个复选框的简单网站。
如果用户单击“全部”复选框，则所有其他复选框将被选中或取消选中，具体取决于“全部”复选框的值。

$(document).ready(function() {
  $("#all").click(function(event) {
    console.log("all");
    $("input[name=vehicle]").each(function() {
      $(this).click();
    });
  });
});

function checkVehicle(event, id) {
  // console.log(event);
  console.log(id);
}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

  <input type="checkbox" id="all" name="all" />
  <label for="all">All</label>

  <input type="checkbox" id="car" name="vehicle" onclick="checkVehicle(event, 1)" />
  <label>Car</label>
  <input type="checkbox" id="bike" name="vehicle" onclick="checkVehicle(event, 2)" />
  <label>Bike</label>
  <input type="checkbox" id="truck" name="vehicle" onclick="checkVehicle(event, 3)" />
  <label>Truck</label>
  <input type="checkbox" id="tank" name="vehicle" onclick="checkVehicle(event,4)" />
  <label>Tank</label>

问题是当我单击“全部”复选框时，每个其他复选框的 checkVehicle 都会被调用 3 次。
我感兴趣的是了解这种行为背后的原因，而不是如何修复它。

我可以使用以下方法之一来解决问题。
第一种方法是，我可以在 DOM 元素上触发点击事件，而不是在 jQuery 元素上触发点击事件。

$(document).ready(function() {
  $("#all").click(function(event) {
    console.log("all");
    $("input[name=vehicle]").each(function() {
      $(this)[0].click();
    });
  });
});

function checkVehicle(event, id) {
  console.log(event);
  console.log(id);
}

第二个方法是，我可以通过编程方式注册事件，而不是内联注册事件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <title>Document</title>
</head>

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

  <input type="checkbox" id="all" name="all" />
  <label for="all">All</label>

  <input type="checkbox" id="car" name="vehicle" />
  <label>Car</label>
  <input type="checkbox" id="bike" name="vehicle" />
  <label>Bike</label>
  <input type="checkbox" id="truck" name="vehicle" />
  <label>Truck</label>
  <input type="checkbox" id="tank" name="vehicle" />
  <label>Tank</label>

</html>

这是我的 index.js

$(document).ready(function() {
  $("#all").click(function(event) {
    console.log("all");
    $("input[name=vehicle]").each(function() {
      $(this).click();
    });
  });

  $("input[name=vehicle]").click(function() {
    console.log("personal");
  });

});
jquery