jquery复选框

使用jQuery操作复选框

jQuery提供多种方法来操作复选框（checkbox）元素，包括选中、取消选中、获取状态等。以下是一些常见操作示例：

选中与取消选中复选框

// 选中所有复选框
$('input[type="checkbox"]').prop('checked', true);

// 取消选中所有复选框
$('input[type="checkbox"]').prop('checked', false);

// 根据ID选中特定复选框
$('#checkboxId').prop('checked', true);

获取复选框的选中状态

// 检查单个复选框是否被选中
if ($('#checkboxId').is(':checked')) {
    // 复选框被选中时的逻辑
}

// 获取所有被选中的复选框
var checkedBoxes = $('input[type="checkbox"]:checked');

监听复选框的更改事件

// 单个复选框的change事件
$('#checkboxId').change(function() {
    if ($(this).is(':checked')) {
        console.log('复选框被选中');
    } else {
        console.log('复选框被取消选中');
    }
});

// 多个复选框的change事件
$('input[type="checkbox"]').change(function() {
    console.log('复选框状态改变');
});

全选/取消全选功能

// 全选
$('#selectAll').click(function() {
    $('input[type="checkbox"]').prop('checked', true);
});

// 取消全选
$('#deselectAll').click(function() {
    $('input[type="checkbox"]').prop('checked', false);
});

获取选中复选框的值

// 遍历所有被选中的复选框并获取值
$('input[type="checkbox"]:checked').each(function() {
    console.log($(this).val());
});

禁用与启用复选框

// 禁用复选框
$('#checkboxId').prop('disabled', true);

// 启用复选框
$('#checkboxId').prop('disabled', false);

注意事项

• 使用prop()方法而不是attr()来操作checked和disabled属性，因为prop()更可靠。
• :checked选择器用于匹配所有被选中的复选框。
• change事件在复选框状态改变时触发。