Question

我正在尝试切换桌面上的所有复选框，但我的代码有效，但有一些问题，我找不到如何驾驭它们。所以这是代码：

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

看看this小提琴我设置进行测试并进行测试：

标记第一个复选框（表格标题级别的复选框），#codigoArancelarioBody内的其余复选框被选中，这是正确的
首先标记第一行的复选框（仅限于桌子主体级别），然后标记toggleAll，您将看到出现问题的原因，因为如果我检查切换所有这些都应该保持选中状态，这是我的代码中的错误部分

我如何解决这个问题？另外，我想在TR I标记中添加一个'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

因为相同的代码将在我的代码和很多地方应用为了避免干，我想把选择器作为参数传递给所有人您的代码解决方案可以编辑您的帖子来实现这一目标吗？

$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

如果您不需要“点击”事件，则可以执行此操作：

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

Answer 3

代码实际上正在执行您告诉它的操作，即每次点击顶部的复选框 点击 < / strong>到其他复选框。这样，如果选中一个方框，它将取消选中，因为它不会介意是否检查顶部。

你真正想要的是“当我检查时，检查所有其他人，当我 取消选中 时， 取消选中 所有其他人“，如您所见，这有点不同。< / p>
试试这个：

$(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/

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

3 个答案: