jquery复选框选中事件

jQuery 复选框选中事件处理

使用 jQuery 监听复选框选中状态变化可以通过多种方式实现。以下是几种常见的方法：

方法一：使用 change 事件

$('#checkboxId').change(function() {
    if($(this).is(':checked')) {
        // 复选框被选中时执行的代码
    } else {
        // 复选框取消选中时执行的代码
    }
});

方法二：使用 click 事件

$('#checkboxId').click(function() {
    if($(this).prop('checked')) {
        // 复选框被选中时执行的代码
    } else {
        // 复选框取消选中时执行的代码
    }
});

方法三：使用 on 方法绑定事件

$('#checkboxId').on('change', function() {
    console.log('选中状态：' + $(this).prop('checked'));
});

方法四：处理动态生成的复选框

对于动态添加到页面的复选框，需要使用事件委托：

$(document).on('change', '.checkboxClass', function() {
    alert('选中状态改变：' + $(this).is(':checked'));
});

获取复选框选中状态

获取复选框当前选中状态的几种方式：

// 方法1
var isChecked = $('#checkboxId').is(':checked');

// 方法2
var isChecked = $('#checkboxId').prop('checked');

// 方法3
var isChecked = $('#checkboxId')[0].checked;

设置复选框选中状态

// 选中复选框
$('#checkboxId').prop('checked', true);

// 取消选中复选框
$('#checkboxId').prop('checked', false);

// 切换选中状态
$('#checkboxId').prop('checked', function(i, val) {
    return !val;
});

处理多个复选框

如果需要处理一组复选框：

$('.checkboxGroup').change(function() {
    $('.checkboxGroup').each(function() {
        if($(this).is(':checked')) {
            // 处理选中的复选框
        }
    });
});

// 获取所有选中复选框的值
var selectedValues = $('.checkboxGroup:checked').map(function() {
    return $(this).val();
}).get();

注意事项

1. 推荐使用 prop() 而不是 attr() 来获取/设置 checked 属性
2. 动态生成的元素需要使用事件委托
3. change 事件比 click 更准确地反映状态变化
4. 在事件处理函数中，this 指向当前 DOM 元素

以上方法可以满足大多数复选框选中事件处理的需求，根据具体场景选择最适合的实现方式。