使用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 是属性而非特性。