如何使用JS获取Radio选中的值并设置状态？

背景介绍

Radio是HTML表单元素之一，可以用于选择单个选项。通过JavaScript，我们可以获取Radio选中的值并设置状态，实现动态交互效果。本文将详细讲解如何使用JS获取Radio选中的值并设置状态。

获取Radio选中的值

要获取Radio选中的值，首先需要了解Radio的属性和方法。

• name属性：用于标识Radio属于哪个组，多个Radio的name值相同即为同一组。
• value属性：用于指定Radio的值。
• checked属性：用于判断Radio是否被选中。
• document.getElementsByName(name)方法：用于获取指定name值的Radio集合。

有了这些基础知识，我们就可以通过以下步骤来获取Radio选中的值：

1. 获取指定name值的Radio集合。
2. 遍历Radio集合，逐个判断其checked属性是否为true。
3. 如果checked属性为true，则说明该Radio被选中，获取其value值即可。

示例代码

以下是获取Radio选中的值的示例代码：

// 获取指定name值的Radio集合
var radios = document.getElementsByName('gender');
for (var i = 0; i 
设置Radio状态
要设置Radio的状态，同样需要了解Radio的属性和方法。

• setAttribute(name, value)方法：用于设置指定属性的值。
• removeAttribute(name)方法：用于移除指定属性。
• document.getElementById(id)方法：用于通过id获取指定元素。

有了这些基础知识，我们就可以通过以下步骤来设置Radio的状态：

1. 获取指定id值的Radio。
2. 使用setAttribute方法设置checked属性为true或false。

示例代码

以下是设置Radio状态的示例代码：

// 获取指定id值的Radio
var radio = document.getElementById('male');
// 设置Radio为选中状态
radio.setAttribute('checked', 'checked');
// 移除Radio的选中状态
radio.removeAttribute('checked');

总结

本文详细讲解了如何使用JS获取Radio选中的值并设置状态。对于前端开发人员来说，掌握这些基础知识是非常必要的。同时，本文也提供了示例代码，读者可以在实际开发中进行参考和运用。