调用此函数时防止传播到事件处理程序.检入另一个函数

Question

我有一个'选择所有'复选框，我试图同步它与页面上的其他一些复选框。如果所有其他复选框都被取消选中，那么我想取消选中'select all'复选框。

问题是，如果单击其中一个复选框两次，则行为不符合预期。我相信是因为当我打这个电话的时候。在"select all"事件处理程序中进行检查，该事件处理程序正在传播给其他事件处理程序。有办法阻止这种情况发生吗?

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

工作小提琴。

Use e.stopPropagation() Inside each method

描述:防止事件冒泡到DOM树，防止任何父处理程序被通知的事件

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

Answer 2

已更新

e.s stopPropagation()用于防止事件冒泡到DOM树(指向父节点)，其中e是事件处理程序，stopPropagation()是javascript函数。

但是在你的情况下你不需要，你的code有问题

检查工作小提琴

或表示Snippet工作

$(function() {
    $("#selectall").on('change', function(e) {
        $('input:checkbox').prop('checked', this.checked);
        $("#selectall + span").text("Deselect All");
    });
    $("input[type=checkbox]").on('change', function(e) {
       var length = $("input[type='checkbox']:checked").not("#selectall").length;
       if(length==0){
           $("#selectall").prop("checked",false);
           $("#selectall + span").text("Select All");
       } else if(length == 2){
           $("#selectall").prop("checked",true);
           $("#selectall + span").text("Deselect All");
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>