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