在前端开发中，我们经常需要用到 radio button 控件。它是一种特殊的单选框，用于在多个选项中选择一个。在某些情况下，我们需要通过点击其他元素来选中/取消选中某个 radio button。本文将介绍如何使用 jQuery 来实现这一功能。
HTML 结构
首先，我们需要了解 radio button 的基本 HTML 结构：
<input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br>
注意，这里的 name 属性必须相同，否则这些 radio button 就不会被视为一组。
实现选中/取消选中
接下来，我们要以点击按钮为例，通过 jQuery 来实现选中/取消选中 radio button。
选中 radio button
-- -------------------- ---- -------
------ ------------ ------------- ------------- --------
------ ------------ ------------- --------------- ----------
------- ----------------------- -------------
--------
---------------------------- -
---------------------------------- -
------------------------------------------------------- ------
---
---
---------在这段代码中，我们给“选择 Male”按钮添加了一个点击事件。当用户点击该按钮时，我们使用 $("input[name='gender'][value='male']") 选择器来选中 name 为 gender，value 为 male 的 radio button。最后，我们使用 .prop("checked", true) 将该 radio button 标记为选中状态。
取消选中 radio button
-- -------------------- ---- -------
------ ------------ ------------- ------------- --------
------ ------------ ------------- --------------- ----------
------- --------------------------- -------------
--------
---------------------------- -
------------------------------------ -
------------------------------------------------------- -------
---
---
---------这段代码与上面的代码非常相似，只是将 .prop("checked", true) 改为了 .prop("checked", false)，这样就可以取消选中 radio button 了。
总结
jQuery 是一个非常强大且易于使用的 JavaScript 库，它可以帮助我们更轻松地实现前端开发中的各种功能。在本文中，我们学习了如何使用 jQuery 来选中/取消选中 radio button。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25597