将复选框设置为使用jQuery选中

Setting checkbox as checked with jQuery

本文关键字：jQuery 选中 复选框 设置      更新时间：2023-09-26

我有两个输入复选框，我想用jQuery:选中/取消选中它们

<input type="checkbox" name="user1" value="1" id="u1" onclick="loadUserCalendar(1)">
<input type="checkbox" name="user2" value="2" id="u2" onclick="loadUserCalendar(2)">

JavaScript代码：

var list = new cookieList("calendar_users"); 
var users = list.items();
for (var i = 0; i < users.length; i++) {
    $('input[name="user' + users[i].substr(1,1) + '"]').attr('checked', true);
    console.log('substring: ' + users[i].substr(1,1));
    console.log('enabling user ' + users[i]);
}

var users包含以下值：u1,u2。为了只获取用户ID，我执行了一个子字符串，它为我提供了正确的数字，正如您在控制台输出中看到的那样。

控制台输出：

substring: 1
enabling user u1
substring: 2 
enabling user u2

我不知道为什么在代码运行时没有选中复选框。我在这里做错了什么？

编辑：由于兼容性原因，我使用jQuery 1.4.4，这就是我使用.attr()

的原因

内联事件处理程序（onclick="loadUserCalendar(1)"）不是jQuery方式。你的html中不应该有。去掉它们并添加到您的jquery中：

$(function() {
    $('form').on('click',':checkbox', function() {
        loadUserCalendar($(this).val());
    });
});

但也许你想要的是：

$(function() {
    $('form').on('click',':checkbox', function() {
        $('form :checkbox').attr('checked','checked');
    });
});

jquery 1.古代版本：

$(function() {
    $('input[type=checkbox]').live('click', function() {
        // do things
    });
});

您使用的是什么版本的jQuery？

你必须尝试这样的东西：

$('input[name="user' + users[i].substr(1,1) + '"]').attr('checked', 'checked');

或

$('input[name="user' + users[i].substr(1,1) + '"]').prop('checked', 'checked');

第二个是jQuery 1.6+

当您想要检查某个东西时，您必须执行以下操作：

 $('.myCheckbox').attr('checked','checked');

如果您已经动态创建了复选框，请在方法上使用jQuery，因为简单的函数将无法访问这些元素。

关于复选框的初始化，我建议如下： 
$('input[type=checkbox]').each(function(index, box) {
    $(box).attr('checked', $.inArray($(box).attr("id"), users) != -1);
});
相关文章：