javascript - 修复复选框元素中的切换所有行为

Question

我正在尝试切换表格上的所有复选框，我的代码可以工作，但有一些问题，我不知道如何解决它们。所以这是代码:

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

看看this我设置 fiddle 进行测试并进行此测试:

• 标记第一个复选框(表格标题级别的复选框)，#codigoArancelarioBody 内的其余部分均已选中，这是正确的
• 首先标记第一行的复选框(仅在表体级别)，然后标记toggleAll，您将看到事情如何出错，因为如果我检查toggleAll，它们都应该保持选中状态，这是我的代码中的错误部分

我该如何解决这个问题？另外，我想向我标记的那些 TR 添加一个类“removedAlert”，如何？

Answer 1

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

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

<小时/>

since the same code will be applied in a lot of places on my code and to avoid DRY, I'll like to pass the selector as a parameter in all your code solution could you edit your post to achieve this?

$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