当前位置：首页 > JavaScript

使用js实现checked

2026-02-02 17:13:05JavaScript

以下是使用JavaScript实现复选框（checkbox）选中状态的几种常见方法，涵盖基础操作、事件监听及动态控制：

获取DOM元素并设置checked属性

通过document.getElementById或querySelector获取复选框元素，直接修改checked属性：

// 通过ID获取
const checkbox = document.getElementById('myCheckbox');
checkbox.checked = true; // 选中
checkbox.checked = false; // 取消选中

// 通过CSS选择器获取
const checkbox = document.querySelector('input[type="checkbox"]');
checkbox.checked = true;

通过事件监听实现交互

监听复选框的change事件，根据状态执行操作：

document.getElementById('myCheckbox').addEventListener('change', function(e) {
  if (e.target.checked) {
    console.log('复选框被选中');
  } else {
    console.log('复选框取消选中');
  }
});

动态创建复选框并设置状态

使用document.createElement动态生成复选框，并设置初始状态：

const newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.checked = true; // 默认选中
document.body.appendChild(newCheckbox);

表单提交时获取选中状态

在表单提交时，遍历所有复选框并获取选中值：

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    if (checkbox.checked) {
      console.log(checkbox.value + ' 被选中');
    }
  });
});

批量操作复选框

全选或反选一组复选框：

使用js实现checked

// 全选
function selectAll() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => checkbox.checked = true);
}

// 反选
function toggleAll() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => checkbox.checked = !checkbox.checked);
}

使用jQuery简化操作（如项目已引入jQuery）

// 设置选中
$('#myCheckbox').prop('checked', true);

// 监听变化
$('#myCheckbox').change(function() {
  console.log($(this).prop('checked') ? '选中' : '未选中');
});