Question

我正在使用jquery按钮，需要切换关联的checkebox，但我的代码挂起浏览器。我需要 1）点击全部选择全部 2）点击全选（全部选中）取消选中所有复选框 3）如果所有选中的点击任何子复选框都应该取消选中（全部复选框），并且单击的复选框应该保留。

这是fiddle。

我面临的问题是，当我执行此过程时，复选框会挂起，使浏览器挂起。例如：在小提琴中单击全部，然后单击其间的任何复选框。所以在此之后再次点击全部检查，它会挂起

非常感谢任何帮助。

    <script>
jQuery(document).ready(function(){
// If checkd all and we click on any sub options make ALL option UNCHECKED

jQuery( ".format" ).buttonset();
    //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");
        }
    })
    })

</script>

Answer 1

根据您对其他人的回应，我认为这或多或少是您想要的。 http://jsfiddle.net/drmyersii/27xkkxbw/2/

主要的变化是：

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

    if(!currentChecked && all)
    {
        $('.css-checkbox[data-set="' + set + '"]').prop('checked', false);
        $(this).prop('checked', true);
        jQuery( ".format" ).buttonset();
    }
});

如果这是你想要的，我也可以为你清理小提琴。

Answer 2

我和你的小提琴一起玩弄了解你的问题：您触发点击事件并传递＆＃34;代码＆＃34;作为参数;然后检查参数＆＃34; code＆＃34;如果他们没有发送参数＆＃34;代码＆＃34;并点击你的元素。 - 所以你试图阻止重复点击。但是，如果添加一些console.log语句，您将很快发现参数＆＃34; source＆＃34;永远不会定义 - 它始终未定义 - 所以您的复选框一遍又一遍地被点击。

如果您按照Bardo的建议切换到使用2个活动，那么您可以真正区分点击来自哪里，并且您不会遇到延迟。

我分叉你的小提琴并做了一些改变。我认为这可以做你想做的事情并且效果很好：http://jsfiddle.net/bmartinelle/brzexyf9/

 $("input[type=checkbox][data-set='" + set + "']").each(function () {
      $(this).trigger("cclick", "code");//trigger a custom click event! you can't pass a parameter to the default click event
 });


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

       if(allChecked &! $(this).is(":checked"))
       {
             $(this).click();
       }else if( (!allChecked) && $(this).is(":checked"))
       {
           $(this).click();
        }

  });

编辑：还支持取消选中＆＃34; all＆＃34;如果未选中某个元素，则按钮：

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

           if(!currentChecked && all)
           {
               //we need to uncheck all:

                $(".chkcmfall[data-set='" + set + "']").prop("checked", false);
                $( ".format" ).buttonset();
           }
 });

Answer 3

你的逻辑没有什么特别的错误。您的缓慢来自您使用设置复选框的方法。你可以在每个上面调用click（），当然，每次都会再次触发事件，并多次重新计算所有内容。相反，我推荐这个：

$("body").on("click",".chkcmfall", function() {
    var set = $(this).data("set");
    var allButtonIsChecked = $(".chkcmfall[data-set='" + set + "']").prop('checked');
    var checkBoxSet = $(".wrap_acf input[type=checkbox][data-set='" + set + "']");
    checkBoxSet.prop('checked',allButtonIsChecked);
    checkBoxSet.each(function () {
        var myLabel = $("label[for='" + $(this).prop('id') + "']");
        myLabel.removeClass('ui-state-active');
        myLabel.removeAttr('aria-pressed');
        if ($(this).prop('checked')){
            myLabel.addClass('ui-state-active');
            myLabel.attr('aria-pressed',"true");
        }
    });
});

$("body").on("click",".wrap_acf input[type=checkbox][data-set]", function () {
    var set = $(this).data("set");
    var allButton = $(".chkcmfall[data-set='" + set + "']");
    if (allButton.prop('checked')){
        allButton.trigger("click");
        $(this).prop('checked',"true");
        var myLabel = $("label[for='" + $(this).prop('id') + "']");
        myLabel.addClass('ui-state-active');
        myLabel.attr('aria-pressed',"true");            
    }

});

Answer 4

好的，让我们看看我是否理解你需要的东西。

您想要一个按钮，在点击检查/取消选中页面上的所有复选框时，您希望在单击复选框时，如果选中该复选框，则会保持选中状态，而其他所有复选框都未选中。这是对的吗？

好的，在这种情况下你需要两个事件。一个用于按钮单击，另一个用于复选框元素单击。

第一个应该简单：

$("#myButton").on("click", function() {
    //If just one or none checkboxes are enabled then button click should enable all
    //otherwise button click should disable all
    var enableAll = $('input[type="checkbox"]:checked').length <= 1;
    $('input[type="checkbox"]').attr("checked", enableAll);
});

然后，单击一个复选框即可执行以下操作： 1）取消选中所有复选框 2）选中此复选框

$('input[type="checkbox"]').on("click", function() {
    $('input[type="checkbox"]').attr("checked", false);
    $(this).attr("checked", true);
});

可能你需要解决一些代码，因为我正在运行它。基本的想法是，如果我正确理解你的需要，可能你的代码应该比现在的代码简单得多......试试这些想法。

我希望它有所帮助。

带有所有按钮的Jquery Button插件可以切换复选框

4 个答案: