我尝试实现一个有 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");
});
});
您遇到了2019 年报告的一个错误，问题＃4493：
jQuery 团队成员的回复是：
wontfix 列表有：
所以你明白了。这是一个已知的错误，并且不会被修复。
当您在处理程序
$(this).trigger('click');内部调用时$("#all").click(function(event) { ... });，它会模拟每个复选框上的单击事件。您可以尝试设置
prop值checked然后触发函数checkVehicle正如评论所澄清的那样，如果您只想检查属性，那么您应该能够
$("input[name=vehicle]").prop("checked", $(this).prop("checked"))不使用循环，jQuery 会为您处理：但是，如果你只是想知道幕后发生了什么，那么请看一下这个代码片段：
您会注意到，如果没有 jQuery 对象
$(this)，简单.click()的this就可以实现您想要的效果。因此，.each()回调中的“this”含义显然与此相关。请注意，第二个脚本将否定您的复选框，因此如果您先手动选中复选框，然后单击全部以选中全部，那么您选中的复选框将被取消选中，这不太可能是您的意图。您可以像这样增强它：