jquery复选框
jQuery 复选框操作指南
获取复选框状态
使用 prop() 方法获取复选框的选中状态：
var isChecked = $('#checkboxId').prop('checked');设置复选框状态
通过 prop() 方法设置复选框的选中或取消选中：
$('#checkboxId').prop('checked', true); // 选中
$('#checkboxId').prop('checked', false); // 取消选中监听复选框变化事件
使用 change 事件监听复选框状态变化：
$('#checkboxId').change(function() {
if ($(this).prop('checked')) {
console.log('复选框被选中');
} else {
console.log('复选框被取消选中');
}
});获取选中的复选框值
遍历所有选中的复选框并获取其值：
$('input[type="checkbox"]:checked').each(function() {
console.log($(this).val());
});全选/取消全选
通过一个复选框控制多个复选框的全选或取消全选：
$('#selectAll').change(function() {
$('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});动态创建复选框
使用 jQuery 动态创建复选框并添加到 DOM 中：
var checkbox = $('<input>', {
type: 'checkbox',
id: 'dynamicCheckbox',
value: 'dynamicValue'
});
$('#container').append(checkbox);禁用/启用复选框
通过 prop() 方法禁用或启用复选框：
$('#checkboxId').prop('disabled', true); // 禁用
$('#checkboxId').prop('disabled', false); // 启用复选框样式自定义
使用 CSS 或第三方库（如 Bootstrap）美化复选框：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="styledCheckbox">
<label class="form-check-label" for="styledCheckbox">自定义样式复选框</label>
</div>注意事项
- 使用
prop()而非attr()处理复选框状态，因为prop()更可靠。 - 动态生成的复选框需使用事件委托（
on()）绑定事件：$(document).on('change', '.dynamic-checkbox', function() { console.log($(this).val()); });
