jquery复选框
jQuery 复选框操作
使用 jQuery 操作复选框(checkbox)可以实现选中、取消选中、获取状态等功能。以下是常见的操作方法:
选中复选框
通过设置 checked 属性为 true 可以选中复选框。
$('#checkboxId').prop('checked', true);
取消选中复选框
通过设置 checked 属性为 false 可以取消选中复选框。
$('#checkboxId').prop('checked', false);
获取复选框状态
使用 prop('checked') 可以获取复选框的选中状态,返回值为布尔值。
var isChecked = $('#checkboxId').prop('checked');
if (isChecked) {
console.log('复选框已选中');
} else {
console.log('复选框未选中');
}
切换复选框状态
通过 click() 方法可以切换复选框的选中状态。

$('#checkboxId').click();
监听复选框变化事件
使用 change 事件可以监听复选框状态的变化。
$('#checkboxId').change(function() {
if ($(this).prop('checked')) {
console.log('复选框被选中');
} else {
console.log('复选框被取消选中');
}
});
选中一组复选框
通过选择器选中多个复选框并设置 checked 属性。
$('input[type="checkbox"]').prop('checked', true);
取消选中一组复选框
通过选择器取消选中多个复选框。

$('input[type="checkbox"]').prop('checked', false);
获取选中的复选框值
遍历选中的复选框并获取其值。
$('input[type="checkbox"]:checked').each(function() {
console.log($(this).val());
});
禁用复选框
通过设置 disabled 属性可以禁用复选框。
$('#checkboxId').prop('disabled', true);
启用复选框
通过移除 disabled 属性可以启用复选框。
$('#checkboxId').prop('disabled', false);
注意事项
- 使用
prop()方法操作checked和disabled属性,而不是attr(),因为prop()更适用于布尔属性。 - 事件监听建议使用
change而非click,以确保兼容性和准确性。
以上方法涵盖了 jQuery 操作复选框的常见需求,可根据实际场景选择合适的方式。






