注意:我使用 jQuery 访问 DOM 元素，但使用纯 JavaScript 将事件分配给它，所以我怀疑 jQuery 与它有任何关系
检查这个jsFiddle .
$(document).ready(function() {
$('input')[0].indeterminate = true;
$('input')[0].addEventListener("click", function(event) {
console.log(event.target.checked)
alert("Check is: " + event.target.checked);
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked>如果您在 Chrome 上打开它并单击复选框，警告消息会显示“Check is: false”，而如果您在 Microsoft Edge 上打开它并单击复选框，该消息会显示 “Check is: false” em>“Check is: true”，意思是check属性的状态随着浏览器的变化而变化。
我尝试将 checked 属性与 indeterminate 属性一起设置，以查看我是否强制它以相同的方式对待它，但是 the results are the same
$(document).ready(function() {
$('input')[0].indeterminate = true;
$('input')[0].checked = false;
$('input')[0].addEventListener("click", function(event) {
console.log(event.target.checked)
alert("Check is: " + event.target.checked);
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked>这是 Edge 或 Chrome 上的错误，还是有办法在所有浏览器中实现一致的行为？
最佳答案
此行为与不确定属性有关。请引用Racil Hilan 's reply on this thread .
复选框输入只能有两种状态:选中或未选中。不确定状态只是视觉上的，它掩盖了复选框的真实状态。
您第一次单击不确定设置为“true”的复选框时，只会将其更改为 false，并且该复选框将显示其真实状态。因此，从“不确定”到“选中”或“未选中”的更改不是实际状态的更改，也不会触发“onchange”事件。
虽然 IE 实现在技术上是正确的，但其他浏览器的实现是更实际的。对于大多数应用程序，视觉上的“不确定”状态需要被视为真实状态，就像“选中”和“未选中”一样，这意味着从这 3 种状态中的任何一种状态到另一种状态的变化都应该触发 onchange 事件。
您可以添加更改事件来验证它。在IE和Edge中，第一次点击checkbox时，不会触发change事件，只是显示checkbox的真实状态。但是，在 Chrome 中，它会触发 change 事件并将真实状态更改为另一个真实状态。 代码如下:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input')[0].indeterminate = true;
//$('input')[0].checked = false;
$('input')[0].addEventListener("click", function (event) {
console.log(event.target.checked)
alert("Check is: " + event.target.checked);
});
$('input')[0].addEventListener("change", function (event) {
console.log(event.target.checked)
alert("change event Check is: " + event.target.checked);
})
});
</script>
<input type="checkbox" checked>
</body>
Is this a bug on Edge or Chrome or is there a way to have a congruent behavior across all browsers?
如果您希望所有浏览器的行为一致，您可以尝试将不确定性设置为 false 或删除此属性。
另外，您也可以引用以下代码使用一次性点击事件:
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var checkbox = document.getElementById("cb");
checkbox.indeterminate = true;
$('#cb').one('click', function (e) {
if (!this.checked) {
this.checked = true;
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
this.dispatchEvent(evt);
}
alert(e.target.checked);
}).change(function (e) {
console.log(e);
alert(e.target.checked)
});
});
</script>
</head>
<body>
<label for="cb">
<input id="cb" type="checkbox" checked />click me
</label>
</body>
关于javascript - Chrome 和 Edge 在选中时以不同方式处理设置为 "indeterminate"的复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53015250/