帶有所有按鈕的Jquery Button插件可以切換復選框

Question

我正在使用jquery按鈕，需要切換關聯的checkeboxes但我的代碼掛起瀏覽器。 我需要1）點擊全部選擇全部2）點擊全選（全部選中）取消選中所有復選框3）如果所有選中的任何子復選框都應該取消選中（全部復選框），並且單擊的復選框應該保留。

這是小提琴 。

我面臨的問題是，當我執行此過程時，復選框會掛起，使瀏覽器掛起。 例如：在小提琴中單擊全部，然后單擊中間的任何復選框。 所以在此之后再次點擊檢查全部，它掛斷了

任何幫助都非常感謝。

    <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

我玩弄你的小提琴並找出你的問題：你觸發一個點擊事件並傳遞“代碼”作為參數; 然后檢查參數“code”並點擊你的元素，如果他們沒有發送參數“code” - 那么你試圖防止重復點擊。 但是，如果添加一些console.log語句，您將很快發現參數“source”從未定義 - 它始終未定義 - 因此您的復選框一遍又一遍地被點擊。

如果您按照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();
        }

  });

編輯：如果未選中元素，也支持取消選中“全部”按鈕：

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

可能你需要解決一些代碼，因為我正在運行它。 基本的想法是，如果我正確理解你的需要，可能你的代碼應該比你現在的代碼簡單得多......試試這個想法。

我希望它有所幫助。