使用js实现checked
使用 JavaScript 实现 checked 状态控制
通过 DOM 操作设置 checked 属性
使用 element.checked 属性直接设置复选框或单选框的选中状态：
const checkbox = document.getElementById('myCheckbox');
checkbox.checked = true; // 选中
checkbox.checked = false; // 取消选中通过 setAttribute 方法
通过 setAttribute 方法设置 checked 属性：
const radioButton = document.getElementById('myRadio');
radioButton.setAttribute('checked', 'checked'); // 选中
radioButton.removeAttribute('checked'); // 取消选中动态切换 checked 状态
通过事件监听动态切换 checked 状态：
const toggleButton = document.getElementById('toggleButton');
const targetCheckbox = document.getElementById('targetCheckbox');
toggleButton.addEventListener('click', () => {
targetCheckbox.checked = !targetCheckbox.checked;
});使用 jQuery 实现 checked
如果项目中使用了 jQuery，可以通过以下方式操作：
$('#myCheckbox').prop('checked', true); // 选中
$('#myCheckbox').prop('checked', false); // 取消选中批量设置 checked 状态
通过循环批量设置多个复选框的选中状态：
const checkboxes = document.querySelectorAll('.group-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = true; // 全部选中
});表单提交时获取 checked 状态
在表单提交时获取复选框的选中状态：
document.getElementById('myForm').addEventListener('submit', (event) => {
event.preventDefault();
const isChecked = document.getElementById('agreeCheckbox').checked;
console.log('Checked:', isChecked);
});注意事项
- 对于单选框组，设置一个选项的
checked为true会自动取消同组其他选项的选中状态。 - 直接修改
checked属性不会触发change事件，需要手动调用dispatchEvent触发。 - 使用
prop方法（jQuery）比attr方法更可靠，因为checked是属性而非特性。
