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());
  });