Question

我使用的插件仅在单击复选框时触发，我需要对现有代码执行所有按钮复选框。我已经做到这一点，所以点击所有CHECKBOX我手动TRIGGER点击选择所有复选框并解雇现有的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

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

<强> 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复选框。否则它会取消选中它。

选中chkcmfall复选框后，还会检查所有其他复选框。

编辑：当选中chkcmfall - 复选框，然后选中另一个复选框时，只会检查后一个复选框，其余部分将被取消选中。

编辑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：更新了答案以反映OP的愿望，以便能够拥有多组复选框。

要使这种方法起作用，您必须能够将data- - 属性设置为复选框和（un）select-all-checkbox。在以下示例中，脚本仅根据名为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

Answer 2

假设您有一个带有un复选框（A）（类别：checkall）的表作为标题的一部分。那么此列中的所有元素都是CHECKBOXES（B）（类为checkitem），然后您想要更改所有复选框（B）的状态（未选中则为选中状态，反之亦然）：

$(".checkall").click(function() {
    var value = $(this).is(':checked');
    $('.checkitem:checkbox').each(function(){this.checked = !this.checked;})      
});

Answer 3

我不确定我是否关注，但这是一个简单的脚本，在选中复选框后取消选中所有复选框：

编辑：意识到您正在查看/取消选中一个特定的复选框。

$('.chkcmfall').click(function(){
    var chall = this;
    $('input:checkbox').attr('checked',$(chall).attr('checked');
});

编辑2：记录你的评论：

$('input:checkbox').click(function(){
    var clicked_box = this

    // see if all checkboxes are checked
    if($('input:checked').length == $('input:checkbox').length){
        $('input:checkbox').attr('checked','false');
        $(clicked_box).attr('checked'),'true');
    }
});

复选框使用jquery触发器功能切换所有内容

3 个答案: