引言：联动控制的常见需求
在网页表单设计中，联动控制是一种常见的交互模式。例如，当用户勾选一个复选框时，可能需要启用或禁用一组相关的输入字段，如单选按钮、文本框或下拉列表。这种模式能够提升用户体验，确保表单逻辑的清晰性和数据输入的有效性。本教程将专注于使用纯javascript实现复选框（checkbox）控制一组单选按钮（radio buttons）的启用与禁用。
理解问题：querySelector的局限性
在尝试实现复选框控制多个单选按钮时，一个常见的误区是使用document.querySelector()。例如：
var sipch = document.querySelector("input[name=sip]");
sipch.addEventListener("change", function (event) {
if (event.currentTarget.checked) {
// 错误：这只会影响第一个匹配的单选按钮
document.querySelector("input[name=protocol]").removeAttribute("disabled");
} else {
// 错误：这只会影响第一个匹配的单选按钮
document.querySelector("input[name=protocol]").setAttribute("disabled", "disabled");
}
});document.querySelector()方法只会返回文档中与指定选择器匹配的第一个元素。因此，如果页面上存在多个name="protocol"的单选按钮，上述代码将无法控制除第一个以外的其他单选按钮，导致预期的联动效果无法完全实现。
核心解决方案：querySelectorAll与迭代
要正确控制一组单选按钮，我们需要获取所有匹配的元素，然后对它们逐一进行操作。document.querySelectorAll()方法正是为此而生。它返回一个NodeList（节点列表），其中包含文档中所有与指定选择器匹配的元素。
获取到NodeList后，我们可以使用forEach()方法遍历这个列表，对每个单选按钮应用启用或禁用操作。
立即学习“Java免费学习笔记（深入）”；
HTML结构示例
为了演示这一功能，我们首先需要一个包含复选框和一组单选按钮的HTML结构。为了更好的可访问性和精确的元素选择，建议为关键元素添加id属性。同时，为了确保页面加载时的正确状态，单选按钮应默认设置为disabled。
复选框控制单选按钮示例
在上述HTML中：
- id="sipCheckbox"用于精确选择复选框。
- name="protocol"用于标识一组相关的单选按钮。
- 单选按钮初始状态被设置为disabled，这样在复选框未选中时，它们是不可用的。
JavaScript实现步骤
接下来，我们将编写JavaScript代码来实现联动逻辑。
步骤一：获取元素引用
首先，我们需要获取复选框元素和所有单选按钮元素的引用。
// 获取复选框元素
const sipCheckbox = document.getElementById("sipCheckbox");
// 获取所有name为"protocol"的单选按钮
const protocolRadios = document.querySelectorAll("input[name=protocol]");步骤二：定义状态更新函数
为了代码的整洁和复用性，我们将控制单选按钮状态的逻辑封装到一个函数中。
const updateRadioState = () => {
if (sipCheckbox.checked) {
// 如果复选框被选中，则启用所有单选按钮
protocolRadios.forEach(radio => {
radio.removeAttribute("disabled");
});
} else {
// 如果复选框未被选中，则禁用所有单选按钮
protocolRadios.forEach(radio => {
radio.setAttribute("disabled", "disabled");
// 可选：当禁用时，取消它们的选中状态，避免启用后仍显示上次选择
radio.checked = false;
});
}
};步骤三：初始化状态并添加事件监听器
为了确保页面加载时单选按钮的状态与复选框的初始状态一致，我们应该在DOM加载完成后立即调用updateRadioState函数。然后，为复选框添加change事件监听器，以便在复选框状态改变时实时更新单选按钮的状态。
document.addEventListener('DOMContentLoaded', () => {
const sipCheckbox = document.getElementById("sipCheckbox");
const protocolRadios = document.querySelectorAll("input[name=protocol]");
const updateRadioState = () => {
if (sipCheckbox.checked) {
protocolRadios.forEach(radio => {
radio.removeAttribute("disabled");
});
} else {
protocolRadios.forEach(radio => {
radio.setAttribute("disabled", "disabled");
radio.checked = false; // 禁用时取消选中
});
}
};
// 页面加载时执行一次，设置初始状态
updateRadioState();
// 监听复选框的change事件
sipCheckbox.addEventListener("change", updateRadioState);
});完整代码示例
将上述HTML和JavaScript代码整合后，我们可以得到一个完整的功能示例。将JavaScript代码放入script.js文件，或者直接放在HTML文件底部
标签结束之前。script.js:
document.addEventListener('DOMContentLoaded', () => {
// 获取复选框元素
const sipCheckbox = document.getElementById("sipCheckbox");
// 获取所有name为"protocol"的单选按钮
const protocolRadios = document.querySelectorAll("input[name=protocol]");
/**
* 根据复选框的选中状态更新单选按钮的启用/禁用状态。
* 如果复选框选中，则启用单选按钮；否则禁用并取消选中。
*/
const updateRadioState = () => {
if (sipCheckbox.checked) {
// 遍历所有单选按钮，移除disabled属性以启用它们
protocolRadios.forEach(radio => {
radio.removeAttribute("disabled");
});
} else {
// 遍历所有单选按钮，添加disabled属性以禁用它们
protocolRadios.forEach(radio => {
radio.setAttribute("disabled", "disabled");
// 同时取消选中状态，以避免禁用后重新启用时保留旧选择
radio.checked = false;
});
}
};
// 页面加载时，根据复选框的初始状态设置单选按钮的初始可用性
updateRadioState();
// 为复选框添加change事件监听器
// 当复选框状态改变时，调用updateRadioState函数更新单选按钮状态
sipCheckbox.addEventListener("change", updateRadioState);
});注意事项与最佳实践
- 初始状态处理： 务必在页面加载完成后（例如在DOMContentLoaded事件中）根据复选框的默认状态调用一次updateRadioState函数，以确保单选按钮的初始可用性是正确的。
- 取消选中时的行为： 当禁用单选按钮时，通常建议同时将其checked属性设置为false。这样，当它们再次被启用时，用户需要重新做出选择，避免了可能的数据混淆或不一致。
- 选择器优化： 对于单个元素，使用document.getElementById()通常比document.querySelector()更高效。对于一组元素，document.querySelectorAll()是正确的选择。
- 代码可读性与模块化： 将复杂的逻辑封装到独立的函数中（如updateRadioState），可以提高代码的可读性、可维护性和复用性。
- 无jQuery： 本教程的所有示例都严格使用纯JavaScript实现，无需依赖任何外部库。
总结
通过本教程，我们学习了如何使用纯JavaScript实现一个常见的表单联动功能：复选框控制一组单选按钮的启用与禁用。关键在于理解document.querySelectorAll()方法能够获取所有匹配元素，并通过forEach()方法迭代处理它们。这种模式在前端开发中非常实用，能够帮助开发者构建更具交互性和用户友好的表单。
