Это поведение связано с неопределенным свойством. Пожалуйста, обратитесь к Racil Hilan ответ на эту тему .
Флажки могут иметь только два состояния: отмечено или не отмечено. Неопределенное состояние является только визуальным, и оно маскирует реальное состояние флажка.
При первом нажатии на флажок, для которого неопределенное значение установлено как «истина», он просто изменит значение на «ложь», а флажок покажет его реальное состояние. По этой причине изменение с «неопределенного» на «проверено» или «не проверено» не является изменением реального состояния и не вызывает событие «onchange».
Хотя технически реализация IE является правильной, реализация других браузеров является более практичной. Для большинства приложений визуальное «неопределенное» состояние должно рассматриваться как реальное состояние, точно так же как «проверено» и «не проверено», что означает, что изменение любого из этих трех состояний на другое должно вызвать событие onchange.
Вы можете добавить событие изменения, чтобы проверить это. В IE и Edge, когда вы первый раз нажимаете на флажок, он не будет вызывать событие изменения, а просто покажет реальное состояние флажка. Но в Chrome это вызовет событие изменения и изменит реальное состояние на другое реальное состояние.
код как показано ниже:
<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>
Это ошибка в Edge или Chrome или есть способ получить конгруэнтный
поведение во всех браузерах?
Если вы хотите иметь согласованное поведение во всех браузерах, вы можете попытаться установить неопределенность в 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>