要设置html中单选按钮或复选框的默认选中状态，需在对应input标签添加checked属性，该属性无须赋值，只要存在即生效；2. 单选按钮同一name组中应仅有一个checked，否则浏览器以最后一个为准，但应避免此情况以防止逻辑混乱；3. 复选框可多个同时设置checked，均会默认选中；4. 若单选框默认选中不生效，常见原因为不同选项组误用相同name属性导致分组冲突，或javascript在页面加载后动态修改了选中状态；5. 可通过javascript获取dom元素并设置其checked属性为true或false来动态控制选中状态，单选按钮设为true时会自动取消同组其他选项；6. 表单提交时，仅被选中的单选按钮和复选框的value值会被发送，传统提交由浏览器自动收集，ajax提交可通过queryselector获取单个选中radio值，或通过queryselectorall遍历收集多个选中checkbox值，推荐使用formdata api自动采集表单数据并发送。
在HTML中，要设置默认选中状态，无论是单选按钮（radio）还是复选框（checkbox），核心都是利用它们各自的
checked属性。单选按钮用于在多个选项中选择一个，而复选框则允许用户选择零个、一个或多个选项。理解它们的区别和用法，能让你在构建交互式表单时游刃有余。
解决方案
设置默认选中状态其实非常直接，就是给对应的
标签添加一个checked属性。这个属性不需要赋值，只要存在，浏览器就会默认将其渲染为选中状态。
对于单选按钮 (Radio Buttons): 你需要确保同一组（即拥有相同
name属性）的单选按钮中，只有一个被标记为
checked。如果你不小心给多个都加了
checked，浏览器通常会以最后一个出现的
checked状态为准，但这并不是一个好的实践，容易造成混淆。
在这个例子里，“女”会被默认选中。
对于复选框 (Checkboxes): 复选框则没有“唯一选中”的限制。你可以给任意数量的复选框添加
checked属性，它们都会在页面加载时显示为选中状态。
这里，“旅行”和“编程”都会被默认选中。
这种设置方式属于HTML的声明式预设，页面一加载就会生效。实际项目中，很多时候这个“默认”状态是根据后端数据动态生成的，比如用户上次选择的偏好，那就需要后端语言在渲染HTML时，根据数据判断是否输出
checked属性。
单选框（radio）设置了默认选中却不生效，这是为什么？
嗯，这个问题我遇到过不止一次，尤其是在调试一些老旧或复杂的表单时。最常见的原因，说到底还是对
name属性的理解不够透彻，或者说，是忽略了它的“分组”作用。
一个最典型的场景就是：你可能在同一个表单里，不小心给两组完全不相关的单选按钮起了相同的
name。比如，你有一个“性别”选择，
name="gender"，然后下面又来一个“是否同意条款”的选择，结果也写成了
name="gender"。这样一来，浏览器就懵了，它会把这两个完全不搭边的选项组当成一个整体。当你试图在“性别”里默认选中“男”，又在“同意条款”里默认选中“同意”时，如果它们都叫
gender，那最终可能只有后面那个
checked的会生效，或者行为变得不可预测。
还有一种情况，虽然少见，但确实发生过：你可能在HTML里写了
checked，但随后有JavaScript代码在页面加载完成后，又动态地修改了这些单选按钮的状态。JavaScript的DOM操作优先级更高，它会覆盖掉HTML里静态设置的
checked属性。比如，某个脚本根据用户的cookie或者URL参数，强制设定了另一个选项为选中，那你的HTML默认值自然就被“篡改”了。所以，如果发现HTML设置不生效，不妨检查一下是否有JS在背后“捣鬼”。
家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l
记住，单选按钮的
name属性是其灵魂，它定义了“互斥”的范围。只有在同一个
name组内，选择才是互斥的。确保每个逻辑分组的单选按钮都有一个独一无二的
name，这是避免这类问题的关键。
如何通过JavaScript动态控制radio和checkbox的选中状态？
当我们谈论动态控制，这通常意味着用户交互后，或者某些数据加载后，我们需要程序性地改变这些表单元素的状态。JavaScript在这方面简直是得心应手。
最直接的方法就是获取到对应的DOM元素，然后直接操作它们的
checked属性。这个属性是一个布尔值：
true表示选中，
false表示未选中。
对于单选按钮： 如果你想选中某个特定的单选按钮，你需要先找到它，然后设置
checked = true。同时，如果你想取消同组其他单选按钮的选中状态，通常不需要额外操作，因为当一个单选按钮被设为
checked = true时，同
name组内的其他单选按钮会自动变为未选中状态。
// 假设我们想选中 value 为 'female' 的性别单选按钮
const femaleRadio = document.querySelector('input[name="gender"][value="female"]');
if (femaleRadio) {
femaleRadio.checked = true;
}
// 另一个场景：通过ID来操作（如果你的input有ID）
// const myRadio = document.getElementById('mySpecificRadioId');
// if (myRadio) {
// myRadio.checked = true;
// }对于复选框： 复选框的操作更简单，因为它们之间没有互斥关系。你想选中哪个就选中哪个，想取消哪个就取消哪个。
// 选中某个复选框
const travelCheckbox = document.querySelector('input[name="interests"][value="travel"]');
if (travelCheckbox) {
travelCheckbox.checked = true;
}
// 取消选中某个复选框
const readingCheckbox = document.querySelector('input[name="interests"][value="reading"]');
if (readingCheckbox) {
readingCheckbox.checked = false;
}
// 遍历所有同名复选框，根据条件批量设置
const codingCheckbox = document.querySelector('input[name="interests"][value="coding"]');
if (codingCheckbox) {
// 假设根据某个条件决定是否选中
const shouldBeChecked = true; // 或 false
codingCheckbox.checked = shouldBeChecked;
}在实际应用中，我们经常会结合事件监听器来响应用户的操作。比如，用户点击一个按钮，然后根据某种逻辑去改变这些表单元素的状态。
// 示例：点击按钮选中某个选项
document.getElementById('selectFemaleBtn').addEventListener('click', () => {
const femaleRadio = document.querySelector('input[name="gender"][value="female"]');
if (femaleRadio) {
femaleRadio.checked = true;
}
});
// 示例：监听复选框变化
document.querySelectorAll('input[name="interests"]').forEach(checkbox => {
checkbox.addEventListener('change', (event) => {
console.log(`${event.target.value} 的选中状态变为：${event.target.checked}`);
// 在这里可以执行其他逻辑，比如根据选中项显示或隐藏其他内容
});
});通过这些方法，你可以灵活地在客户端（浏览器）控制表单元素的选中状态，实现更丰富的交互体验。
在表单提交时，如何正确获取选中状态的值？
获取选中状态的值，是表单处理的最后一步，也是至关重要的一步。无论是通过传统的表单提交（
form标签的
action属性）还是通过JavaScript异步提交，理解数据是如何传递的都非常重要。
传统表单提交： 当一个
