javascript - 在另一个函数中调用 this.checked 时防止传播到事件处理程序

Question

我有一个“全选”复选框，我正在尝试将其与页面上的其他一些复选框同步。如果取消选择所有其他复选框，那么我想取消选择“全选”复选框。

问题是，如果您单击其中一个复选框两次，则行为将不符合预期。我相信这是因为当我在“全选”事件处理程序中调用 this.checked 时，它会传播到其他事件处理程序。有没有办法阻止这种情况发生？

JFiddle:https://jsfiddle.net/te5cefxe/1/

<label class="checkbox"><input id="selectall" type="checkbox" checked> 
<span>Deselect All</span></label>
<br>
<label class="checkbox device"><input type="checkbox" name="number" value="1" checked>Choice 1</label>
<br>
<label class="checkbox device"><input type="checkbox" name="number" value="2" checked>Choice 2</label>


$(function(){
    $("#selectall").on('click', function(e) {
        var sa = this;
        $(sa).next().text(sa.checked ? 'Deselect All' : 'Select All');

        $("input[type=checkbox]").each(function(){
            if (this != sa) {
        // prevent the click event from propagating to the function below
                this.checked = sa.checked;
            }
        });
    });

    $("input[type=checkbox]").on('click', function(e) {
        var ck = this;
        var sa = $("#selectall")[0];

        if (this != sa) {
            var dif = false;
            $("input[type=checkbox]").each(function(){
                if (this != sa && (dif = !(this.checked == ck.checked))) {;
                    return false; // break out
                }
            });

            if (!dif) {
                console.log('same');
                sa.click();
            }
        }
    });
});

Answer 1

<强> Working fiddle 。

在each方法中使用e.stopPropagation()。

Description : Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event

$("input[type=checkbox]").each(function(e){
    e.stopPropagation();

    if (this != sa && (dif = !(this.checked == ck.checked))) {;
        return false; // break out
    }
});

希望这有帮助。