Question

我有一个＆＃39;全选＆＃39;复选框，我试图将其与页面上的其他复选框同步。如果取消选中所有其他复选框，则我要取消选择“全选”复选框。复选框。

问题是，如果您单击其中一个复选框两次，则行为不符合预期。我相信这是因为当我打电话给这个时，选中所有＆＃39;事件处理程序，它传播到另一个事件处理程序。有没有办法阻止这种情况发生？

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

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

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

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

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

希望这有帮助。

Answer 2

<强>已更新

e.stopPropagation（）用于防止事件冒泡到DOM树（朝向父母），其中 e 是事件处理程序， stopPropagation（）是javascript函数。

但在您的情况下，您不需要，code

检查 Working Fiddle

或 Snippet正在运作。

＆＃13;

$(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");
       }
    });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: