复选框切换全部使用jquery触发器功能

Checkbox toggle all with jquery Trigger function

本文关键字：jquery 触发器 功能 全部 复选框      更新时间：2023-09-26

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

但是我自己的冲突也就是我的触发点击不允许这种情况发生代码在所有复选框被选中的点击和单个复选框被选中

之间进入循环

我已经创建了JS提琴。

总之，我需要从复选框按钮切换如果所有选项都被选中点击其中一个复选框它应该被选中而其余未被选中

下面是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>

我不确定我完全明白你在问什么，但是有了这个脚本，你可以用一个复选框选中/取消选中，这个复选框对其他复选框的变化也有反应。

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:选中所有框现在作为选中/取消选中所有框。

小提琴

编辑3:添加了一个新的解决方案，不使用prop属性，而是根据op的请求使用复选框的click事件。我通过在触发函数中传递额外的参数，在用户的点击和代码触发的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");
        }
    })
});
新小提琴

编辑4:更新了答案，以反映OP希望能够有多组复选框。

要使这种方法工作，您必须能够将data- -attributes设置为复选框和(un)select-all复选框。在下面的示例中，脚本仅基于一个名为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");
        }
    })
});

小提琴3

假设您有一个表uncheckbox (a) (class: checkall)作为标题的一部分。然后该列中的所有元素都是CHECKBOXES (B)(带有class: checkitem)，然后您想要更改所有复选框(B)的状态(选中的将不选中，反之亦然):

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

我不确定我是否遵循，但这里有一个简单的脚本，用于在选中复选框后取消选中所有复选框:

编辑:意识到你正在寻找一个特定的复选框。

$('.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');
    }
});
相关文章：