单选框（Radio Button）是 HTML 中常用的一种表单元素，通常用于用户需要在多个选项中选择一个的场景。当用户点击单选按钮时，只有一个选项可以被选中。
本文将介绍如何使用 JavaScript 在点击时选中/取消选中单选框，并提供示例代码。
1. 获取单选框元素
要操作单选框，首先需要获取单选框的 DOM 元素。可以通过标签名或者 ID 来获取单选框元素。
1.1 根据标签名获取单选框元素
使用 document.getElementsByTagName() 方法可以获取所有的单选框元素。但是这个方法返回的是一个 NodeList 对象，需要遍历才能找到特定的单选框元素。
-- -------------------- ---- ------- -- --------- --- ------ - --------------------------------------- -- ---------- ---- --- ------ ---- --- ---- - - -- - - -------------- ---- - -- --------------- --- ------- -- -------------- --- --------- - -- --- ---- - ------ ---- ----------------------- - -展开代码
1.2 根据 ID 获取单选框元素
如果给单选框元素设置了 ID，可以使用 document.getElementById() 方法来获取该元素。
<input type="radio" name="gender" id="male" value="male"> <label for="male">男</label> <input type="radio" name="gender" id="female" value="female"> <label for="female">女</label>
// 获取 ID 为 male 的单选框元素 var maleRadio = document.getElementById("male"); console.log(maleRadio);
2. 选中/取消选中单选框
获取到单选框元素后，就可以使用 JavaScript 来选中/取消选中单选框了。单选框有一个 checked 属性，可以用来表示是否选中。
2.1 选中单选框
要选中单选框，只需要将其 checked 属性设置为 true。
// 获取 ID 为 male 的单选框元素，并选中它 var maleRadio = document.getElementById("male"); maleRadio.checked = true;
2.2 取消选中单选框
要取消选中单选框，只需要将其 checked 属性设置为 false。
// 获取 ID 为 male 的单选框元素，并取消选中它 var maleRadio = document.getElementById("male"); maleRadio.checked = false;
3. 监听单选框的点击事件
如果要在用户点击单选框时自动选中/取消选中其他单选框，可以通过监听单选框的点击事件来实现。
<input type="radio" name="gender" id="male" value="male" onclick="handleClick(this)"> <label for="male">男</label> <input type="radio" name="gender" id="female" value="female" onclick="handleClick(this)"> <label for="female">女</label>
function handleClick(radio) { if (radio.checked) { // 选中单选框 } else { // 取消选中单选框 } }
上面的代码中，当用户点击单选框时，会调用 handleClick() 函数，并将被点击的单选框元素作为参数传入。在函数中可以根据单选框是否被选中来执行相应的操作。
总结
本文介绍了如何使用 JavaScript 在点击时选中/取消选中单选框，并提供了示例代码。通过本文的学习，读者可以进一步掌握单选框的相关知识，深入理解前端开发中的表单元素操作技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28867
