javascript - 复选框切换所有与 jquery 触发器功能

Question

我正在使用一个仅在单击复选框时触发的插件，我需要现有代码的所有按钮复选框。 我已经这样做了，所以在点击所有复选框时我手动触发点击选择所有复选框并触发现有的 jquery 代码 当用户单击其中一个复选框时出现问题，我希望该选项被选中，因此如果选中所有复选框(包括全部)并且用户单击第三个复选框，它应该自动选择第三个复选框触发单击所有其他复选框(使它们未选中)包括所有

但我自己的冲突，即我的触发点击不会让这种情况发生，代码会在所有复选框选中的点击和单个复选框点击之间循环

我创建了 JS Fiddle .

简而言之，我还需要从复选框按钮进行切换，如果在单击其中一个复选框时选择了所有内容，它应该使该复选框被选中，而其余的则全部未选中

这是 jQuery 代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>

    jQuery(window).ready(function() {
        //check ALl checkbox onClick
         jQuery('body').on('click', '.chktaxoall,.chkcmfall',function (e) {
            if(this.checked){
                    var i = 0;
                var sList;
                 jQuery(this).closest('.togglecheck').find('input:checkbox').each(function () {
                    var sThisVal = (this.checked ? "1" : "0");
                    i++;
                    if(sThisVal==0 && i>1){
                        jQuery(this).trigger('click','bot');
                    }
                });
            }
            else{
                    jQuery(this).closest('.togglecheck').find('input:checkbox').prop('checked', this.checked);
            }
        });
    //IF ALL IS SELECTED but if a user clicks on a particular checkbox uncheck all except the one user checked

    jQuery('body').on('click', '.wrap_acf input:checkbox',function (e) {
    //if all is checked and someone unchecks a checkbox make all uncheck
        var thisParent=jQuery(this).parents('.uwpqsf_class').attr('id');
        var AllTicked =jQuery("#"+thisParent+" .chkcmfall").prop('checked');
        if(thisParent && AllTicked){
            jQuery("#"+thisParent+" .chkcmfall").prop('checked',false)
            //jQuery(this).trigger('click');
        }

    })


    });

</script>

这是 HTML 结构

    <div id="mycategory" class="filter_acc_class uwpqsf_class togglecheck">
    <h2 class="LabelPlaceHolder">Category</h2>

        <!-- Add controlall and data-boxid -->
        <label class="searchLabel control controlAll checkbox" data-boxid="wrap_id_cats"><input type="checkbox" class="chkcmfall" value="" name="mycatname[]" data-boxid="wrap_id_cats"><span class="control-indicator"></span>All</label>
        <div id="wrap_id_cats" class="wrap_acf togglecheck">
                <label class="searchLabel control checkbox"><input type="checkbox" value="16" name="mycatname[]"><span class="control-indicator"></span>Bakery<span class="fltr_num">(12)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="18" name="mycatname[]"><span class="control-indicator"></span>Indulgences<span class="fltr_num">(12)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="17" name="mycatname[]"><span class="control-indicator"></span>Dairy<span class="fltr_num">(7)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="19" name="mycatname[]"><span class="control-indicator"></span>Meat<span class="fltr_num">(7)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="27" name="mycatname[]"><span class="control-indicator"></span>test4<span class="fltr_num">(7)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="24" name="mycatname[]"><span class="control-indicator"></span>test1<span class="fltr_num">(5)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="26" name="mycatname[]"><span class="control-indicator"></span>test3<span class="fltr_num">(5)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="25" name="mycatname[]"><span class="control-indicator"></span>test2<span class="fltr_num">(1)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="29" name="mycatname[]"><span class="control-indicator"></span>test6<span class="fltr_num">(1)</span></label><br>
                <label class="searchLabel control checkbox"><input type="checkbox" value="30" name="mycatname[]"><span class="control-indicator"></span>test7<span class="fltr_num">(1)</span></label>
            </div>
    </div>

Answer 1

不确定我是否完全理解您的要求，但是使用此脚本您可以选中/取消选中一个复选框，该复选框也会对其他复选框的更改使用react。

JavaScript:

$("input[type=checkbox]:not(.chkcmfall)").on("change", function () {
    if ($(".chkcmfall").is(":checked")) {
        $("input[type=checkbox]:not(this)").prop("checked", false);
        $(this).prop("checked", true);
    }

    $(".chkcmfall").prop("checked", $("input[type=checkbox]:not(.chkcmfall):checked").length == $("input[type=checkbox]:not(.chkcmfall)").length);
});

$(".chkcmfall").on("change", function () {
    $("input[type=checkbox]").prop("checked", $(this).is(":checked"));
});

它有什么作用？ 它对所有复选框应用事件处理程序， 类为 chkcmfall 的复选框除外。每当这些复选框中的一个从选中变为未选中或反之亦然时，它会计算所有选中的复选框(具有类 chkcmfall 的复选框除外)，如果它与复选框总数匹配，它会检查 chkcmfall-checkbox以及。否则它会取消选中它。

选中 chkcmfall-checkbox 时，也会选中所有其他复选框。

编辑:当检查 chkcmfall -Checkbox时，然后检查了另一个复选框，只会检查后一个，其余的将不受控制。

编辑 2:选中所有框现在用作选中/取消选中所有框。

FIDDLE

---

编辑 3:添加了一个新的解决方案，不使用 prop 属性，而是根据 OP 的要求使用复选框的 click 事件。通过在 trigger-function 中传入一个额外参数，我区分了用户点击和代码触发的 click .这将防止 OP 谈到的无限循环，因为我们现在可以防止执行基于点击源的触发点击事件。

JavaScript:

jQuery(window).ready(function () {
    //check ALl checkbox onClick
    jQuery('body').on('click', '.chktaxoall,.chkcmfall', function (e, source) {
        var all = $(this).is(":checked");
        if (source != "code") {
            $("input[type=checkbox]:not(this)").each(function () {
                if ($(this).is(":checked") != all) 
                    $(this).trigger("click", "code");
            });
        }
    });

    jQuery('body').on('click', '.wrap_acf input:checkbox', function (e, source) {
        var allChecked = $(".chkcmfall").is(":checked");
        if (source != "code" && allChecked) {
            $(".wrap_acf input:checkbox:not(this)").trigger("click", "code");
            $(".chkcmfall").trigger("click", "code");
        } else if (source != "code") {
            if ($(".wrap_acf input:checkbox:checked").length == $(".wrap_acf input:checkbox").length) 
                $(".chkcmfall").trigger("click", "code");
        }
    })
});

NEW FIDDLE

---

编辑 4:更新了答案以反射(reflect) OP 希望能够拥有多组复选框的愿望。

要使这种方法起作用，您必须能够为复选框和(取消)全选复选框设置 data- 属性。在以下示例中，脚本仅根据名为 set 的数据属性应用复选框的选中/取消选中。

$(document).ready(function () {
    //check ALl checkbox onClick
    $("body").on("click", ".chktaxoall,.chkcmfall", function (e, source) {
        var all = $(this).is(":checked");
        var set = $(this).data("set");

        if (source != "code") {
            $("input[type=checkbox][data-set='" + set + "']:not(this)").each(function () {
                if ($(this).is(":checked") != all) 
                    $(this).trigger("click", "code");
            });
        }
    });

    $("body").on("click", ".wrap_acf input:checkbox", function (e, source) {
        var set = $(this).data("set");
        var allChecked = $(".chkcmfall[data-set='" + set + "']").is(":checked");

        if (source != "code" && allChecked) {
            $(".wrap_acf input[type=checkbox][data-set='" + set + "']:not(this)").trigger("click", "code");
            $(".chkcmfall[data-set='" + set + "']").trigger("click", "code");
        }
        else if (source != "code")
        {
            if ($(".wrap_acf input[type=checkbox][data-set='" + set + "']:checked").length == $(".wrap_acf input[type=checkbox][data-set='" + set + "']").length)
                $(".chkcmfall[data-set='" + set + "']").trigger("click", "code");
        }
    })
});

FIDDLE 3