javascript - 如何选中和取消选中 WebGrid 列中的所有复选框？

Question

是否有任何原因无法检查和取消选中复选框？如果我不触摸任何复选框，它会在按钮单击事件中选中和取消选中所有复选框。如果我手动选中某个框，则该框从此不会被修改，但其余部分将继续修改。

如何解决这个问题？

function checkAll() {
  $('#grid tbody tr').each(function () {
    if ($(this).find("td input[type=checkBox]").is(":checked")) {
      $(this).find("td input[type=checkBox]").removeAttr("checked");
      //$(this).find("td input[type=checkBox]").attr("checked", false); //also tried this
    }
    else {
      $(this).find("td input[type=checkBox]").attr("checked", true);
    }
  });
}

更新1:

我已经做了额外的循环来遍历每个复选框，但仍然得到相同的结果。这是更新后的代码:

function checkAll() {
    var count = $('#grid tbody tr').length;
    $('#grid tbody tr').each(function () {
        $(this).find("td input[type=checkBox]").each(function () {
            if ($(this).is(":checked")) {
                $(this).attr("checked", false);
            }
            else {
                $(this).attr("checked", true);
            }
        })
    });
}

Answer 1

根据https://api.jquery.com/attr/您不应该使用 attr 方法来选中和取消选中复选框，因为它指向 defaultChecked 属性，并且应该仅用于设置复选框的初始值。

可能是你的问题的原因，尝试使用 prop() 而不是 attr()(https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/)