javascript - jQuery MultiSelect 库使用不正确的方法来处理 "Select All"？

Question

我正在尝试更新一个使用 an extended version of Cory S.N. LaViska's jQuery.multiSelect plugin 的大型 Web 应用程序.

我更新到最新的代码，它解决了我遇到的问题。但是，它引入了一个新问题:选中“全选”选项现在会取消选中所有内容，而不是选中它。

我在 JavaScript 方面并不是非常先进，但已将问题隔离到以下代码:

currentMultiSelect.next('.multiSelectOptions').find('INPUT.selectAll').click(function () {
    if ($(this).attr('checked') == true)
        $(this).parent().parent().find('INPUT:checkbox').attr('checked', true).parent().addClass('checked');
    else
        $(this).parent().parent().find('INPUT:checkbox').attr('checked', false).parent().removeClass('checked');
});

问题是 $(this).attr('checked') 返回“checked”。因此 $(this).attr('checked') == true 将始终为 false。并且代码从未检测到该选项实际上已被选中!

好的，我明白这个问题了。但为什么会这样写，解决这个问题最可靠的方法是什么？我很想知道 JavaScript/jQuery 专家将如何解决这个问题。

Answer 1

checked 是一个属性，当 bool 属性如 disabled 或 checked 时，您应该使用 prop 方法设置为一个元素，该值被映射到该元素的相关 DOM 属性(浏览器执行此操作)，从 jQuery 1.6 开始，要修改属性，prop 方法应该是用于代替 attr。

所以你的代码应该是这样的

currentMultiSelect.next('.multiSelectOptions').find('INPUT.selectAll').click(function () {
    if ($(this).is(':checked'))
        $(this).parent().parent().find('INPUT:checkbox').prop('checked', true).parent().addClass('checked');
    else
        $(this).parent().parent().find('INPUT:checkbox').prop('checked', false).parent().removeClass('checked');
});

如果您使用 .is(":checked") 来检查复选框是否被选中，效果会更好。但使用 prop 设置复选框的 checked 属性。