jquery选择checkbox

jQuery选择checkbox的方法

使用jQuery选择checkbox元素可以通过多种方式实现，以下是常见的方法：

通过元素类型选择

$('input[type="checkbox"]')

通过name属性选择

$('input[name="checkboxName"]')

通过class选择

$('.checkboxClass')

通过ID选择

$('#checkboxId')

操作checkbox的常用方法

获取选中的checkbox

$('input[type="checkbox"]:checked')

设置checkbox为选中状态

$('#checkboxId').prop('checked', true)

取消选中checkbox

$('#checkboxId').prop('checked', false)

切换checkbox的选中状态

$('#checkboxId').prop('checked', function(i, val) {
    return !val;
})

获取checkbox的值

$('#checkboxId').val()

监听checkbox变化事件

$('input[type="checkbox"]').change(function() {
    if($(this).is(':checked')) {
        // 选中时的操作
    } else {
        // 取消选中时的操作
    }
})

批量操作checkbox

选中所有checkbox

$('input[type="checkbox"]').prop('checked', true)

取消所有checkbox选中

$('input[type="checkbox"]').prop('checked', false)

获取所有选中checkbox的值

var values = [];
$('input[type="checkbox"]:checked').each(function() {
    values.push($(this).val());
});

注意事项

• 使用prop()方法而不是attr()来操作checked属性，因为prop()能正确反映当前状态
• 选择器性能：ID选择器最快，属性选择器较慢，应尽量避免在大规模DOM中使用复杂选择器
• 事件委托：对于动态添加的checkbox，建议使用事件委托

  $(document).on('change', 'input[type="checkbox"]', function() {
    // 处理逻辑
  });