Question

注意：我正在使用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上将其打开并单击复选框，则警报消息将显示“检查是否为假” 。而如果您在Microsoft Edge上将其打开并单击复选框，则消息将显示< 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上的错误，还是可以在所有浏览器中实现一致的行为？

Answer 1

此行为与不确定的属性有关。请参阅Racil Hilan 's reply on this thread。

复选框输入只能具有两种状态：选中或未选中。不确定状态仅是可见状态，它会掩盖复选框的真实状态。

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

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

您可以添加更改事件以进行验证。在IE和Edge中，第一次单击复选框时，它不会触发更改事件，而只是显示该复选框的真实状态。但是，在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>

这是Edge或Chrome上的错误，还是有一个完全一致的方法所有浏览器的行为？

如果您希望所有浏览器都具有相同的行为，则可以尝试将indeterminate设置为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>

Chrome和Edge将选中的复选框设置为“不确定”的方式有所不同

1 个答案: