修復切換復選框元素中的所有行為

Question

我試圖切換表格上的所有復選框，但是我的代碼可以運行，但是有幾個問題，我找不到如何使用它們的方法。 所以這是代碼：

$(function () {
    $('#toggleCheckbox').on('click', function () {
        var $toggle = $(this).is(':checked');
        $("#codigoArancelarioBody").find("input:checkbox").click();
    });
});

看看這個 Fiddle I進行測試的設置並進行以下測試：

• 標記第一個復選框（在表標題級別的第一個復選框），其余所有復選框都在#codigoArancelarioBody選中，這是正確的
• 首先在第一行（在表主體級別上）選中復選框，然后標記toggleAll，您將看到問題出在哪里，因為如果我選中toggleAll，所有這些都應保持選中狀態，這是我代碼中的錯誤部分

我該如何解決？ 另外，我想向我標記的TR添加類“ removedAlert”，怎么辦？

Answer 1

您需要兩個click事件處理程序，一個用於選中/取消選中所有框，另一個用於其他

JS

$('#toggleCheckbox').on('click', function () {
    var $toggle = $(this).is(':checked');
    $("#codigoArancelarioBody").find("input:checkbox").prop("checked", $toggle);
});

$("#codigoArancelarioBody input:checkbox").on('click', function () {
    if (!$(this).is(':checked')) {
        $('#toggleCheckbox').prop("checked", false);
    } else if ($("#codigoArancelarioBody input:checkbox").length == $("#codigoArancelarioBody input:checkbox:checked").length) {
        $('#toggleCheckbox').prop("checked", true);
    }
});

DEMO

---

由於相同的代碼將在我的代碼上的很多地方應用，並且為了避免DRY，因此我想在所有代碼解決方案中將選擇器作為參數傳遞給您，您可以編輯帖子以實現這一目標嗎？

$toggleCheckBox = $('#toggleCheckbox');
$checkBoxTbody = $("#codigoArancelarioBody");

$toggleCheckBox.on('click', function () {
    var $toggle = $(this).is(':checked');
    $checkBoxTbody.find("input:checkbox").prop("checked", $toggle);
});

$checkBoxTbody.find("input:checkbox").on('click', function () {
    if (!$(this).is(':checked')) {
        $toggleCheckBox.prop("checked", false);
    } else if ($checkBoxTbody.find("input:checkbox").length == $checkBoxTbody.find("input:checkbox:checked").length) {
        $toggleCheckBox.prop("checked", true);
    }
});

DEMO

Answer 2

如果您不需要“ click”事件進行其他操作，則可以執行以下操作：

$(function () {
    $('#toggleCheckbox').on('change', function () {
        var toggle = $(this).is(':checked');
        $("#codigoArancelarioBody").find("input:checkbox").prop('checked', toggle ).closest('tr').addClass('removedAlert');
    });
});

Answer 3

該代碼實際上是在執行您告訴它的操作，即，每次我單擊頂部的復選框時， 請單擊其他復選框。 這樣，如果選中了一個框，它將自動取消選中它，因為它不會介意是否選中頂部。

您真正想要的是“當我選中頂部的框時， 選中所有其他框，當我取消選中它時，再取消選中所有其他框”，這與您看到的有所不同。

嘗試這個：

 $(function () {
     // best practice: always store the selectors you access multiple times
     var checkboxes = $("#codigoArancelarioBody").find("input:checkbox"),
         toggleAll = $('#toggleCheckbox');

      toggleAll.on('click', function () {
         // is the top checkbox checked? return true, is it unchecked? Then return false.
        var $toggle = $(this).is(':checked');
        // .prop('checked', true) makes it checked, .prop('checked', false) makes it unchecked
        checkboxes.prop('checked', $toggle);
    });
 });

參見： http : //jsfiddle.net/gleezer/nnfg80x1/3/