当您单击它时，IE不会在不确定的复选框上触发“更改"事件 [英] IE does not fire 'Change' event on indeterminate checkbox when you click on it

问题描述

我有一个三态复选框，当用户单击它时我需要触发change事件，但是当复选框的状态为"INDETERMINATE"(浏览器错误?)时，IE不会触发它. br> 在解决IE时，我可以以编程方式触发更改事件，但这不适用于我的情况，因为我需要知道是否由于用户实际单击事件而触发了该事件.

i have a tri-state checkbox and i need the change event to be fired when the user clicks on it but the IE won't fire it when the checkbox's state is on "INDETERMINATE" (browser bug maybe?).
As work around for IE i could trigger the change event programmatically but this doesn't work for my case because i need to know if the event was fired because the user actually clicked on it.

在此处显示错误/在IE和Chrome上进行测试

<label for="cb">
  <input id="cb" type="checkbox" />
   click me
</label>

var checkbox = document.getElementById("cb");
checkbox.indeterminate = true;
$('#cb').change(function(){alert('Change Event')});

我已阅读本文 https://github.com/jquery/jquery/issues/1698 和如何使用不确定的复选框处理浏览器差异，但我可以为我的案件找到特定的解决方案.

I have read this article https://github.com/jquery/jquery/issues/1698 and How to deal with browser differences with indeterminate checkbox but i could find a specific resolution for my case.

有什么办法解决这个问题吗?

Any ideas how to fix this?

谢谢.

推荐答案

复选框输入只能具有两种状态:选中或未选中.不确定状态仅是可视状态，它掩盖了复选框的真实状态.

Checkbox inputs can only have two states: checked or unchecked. The indeterminate state is visual only and it masks the real state of the checkbox.

第一次单击不确定性设置为true的复选框时，只需将其更改为false，该复选框将显示其真实状态.因此，从不确定"到已检查"或未检查"的更改不是真实状态的更改，并且不会触发onchange事件.

The first time you click on a checkbox that has its indeterminate set to true will simply change it to false and the checkbox will show its real state. For that reason, the change from "indeterminate" to either "checked" or "unchecked" is not a change in the real state and it does not trigger the onchange event.

有趣的是，唯一可以正确实现此行为的浏览器是IE.您可以在IE和其他浏览器中对此进行测试:

Interestingly, the only browser that implements this behaviour correctly is IE. You can test this in IE and other browsers:

document.getElementById("cb1").indeterminate = true;
document.getElementById("cb2").indeterminate = true;

<label for="cb1"><input id="cb1" type="checkbox" checked="checked" />I'm actually checked</label>
<label for="cb2"><input id="cb2" type="checkbox" />I'm actually unchecked</label>

在IE中，第一次单击将显示该复选框的真实状态.在Chrome中，它将实际状态更改为其他实际状态.

In IE, the first click will reveal the real state of the checkbox. In Chrome, it will change the real state to the other real state.

尽管从技术上讲IE实现是正确的，但其他浏览器的实现更实用.对于大多数应用程序，可视的不确定"状态需要被视为真实状态，就像已检查"和未检查"一样，这意味着从这3个状态中的任何一个更改为另一个状态都应触发onchange事件.

Although IE implementation is the correct one technically, the implementation of the other browsers is the more practical one. For most applications, the visual "indeterminate" state needs to be considered as a real state just like the "checked" and "unchecked" which means that the change from any of those 3 states to another one should trigger the onchange event.

该如何解决?好吧，最明显的答案可能是仅为IE注册一次单击事件，例如

How to solve this? Well, the most obvious answer can be to register a one-time click event for IE only, like the one suggested by https://github.com/jquery/jquery/issues/1698.

// As other browsers already fire the change event,
// only bind the listener for IE.
if ( window.navigator.userAgent.indexOf('Trident') >= 0 ) {
    $(function(){
        // Pointer events in IE10, IE11 can be handled as mousedown.
        $(document).on('mousedown', 'input', function(){
            // Only fire the change event if the input is indeterminate.
            if ( this.indeterminate ) {
                $(this).trigger('change');
            }
        });
    });
}

但是， A提供的更通用的方法. Wolff 可能是一种更好的方法，因为尽可能避免使用特定于浏览器的代码总会更好:

However, the more generic approach given by A. Wolff is probably a better approach as it is always better to avoid browser-specific code whenever possible:

var checkbox = document.getElementById("cb");
checkbox.indeterminate = true;
$('#cb').one('click', function () {
    if (!this.checked) {
        this.checked = true;
        var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    this.dispatchEvent(evt);
    }
}).change(function (e) {
    console.log(e);
    alert(e.originalEvent)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cb">
    <input id="cb" type="checkbox" />click me
</label>

这篇关于当您单击它时，IE不会在不确定的复选框上触发“更改"事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！