Javascript 修复了checkbox元素中的切换所有行为

我试图切换表上的所有复选框，我的代码可以工作，但有一些问题，我找不到如何使用它们。下面是代码：

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

查看Fiddle I测试设置并执行以下测试：

• 标记第一个复选框（表标题级别的复选框），然后选中

  #codigoarancelariobdy

  中的其余复选框，这是正确的
• 首先在第一行（仅在表体级别）标记复选框，然后标记TOGGALL您将看到事情是如何出错的，因为如果我选中TOGGALL，它们都应该保持选中状态，这是我代码中错误的部分

我怎样才能解决这个问题？此外，我还想在这些TR I标记中添加一个类“removedAlert”，如何？

如果您不需要“单击”事件来执行其他操作，您可以执行以下操作：

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

---

您需要两个单击事件处理程序，一个用于选中/取消选中所有框，另一个用于其他

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);
    }
});

---

---

由于相同的代码将应用于我的代码和 为了避免干燥，我希望将选择器作为参数传递给所有 你的代码解决方案你能编辑你的帖子来实现这一点吗

---

代码实际上正在执行您告诉它要执行的操作，即每次我单击顶部的复选框单击其他复选框时。这样，如果选中一个框，它将取消选中自身，因为它不介意是否选中顶部

您真正想要的是“当我选中顶部的框时，选中所有其他框，当我取消选中它时，取消选中所有其他框”，这与您看到的有所不同

试试这个：

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

---

请参阅：

由于同一代码将应用于我的代码中的许多地方，为了避免干涸，我想在所有代码解决方案中将选择器作为参数传递。您可以编辑您的帖子以实现这一点吗？我正在尝试添加一个额外的功能，如果至少选中一个复选框且该功能不起作用，则启用切换按钮，你能看看我做的叉子吗？

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