js实现不提交表单获取单选按钮值的方法

JS实现在不提交表单的情况下获取单选按钮（radio button）的值有多种方法。下面提供两种常用方法供参考：

方法一：遍历单选按钮组，获取选中的值

要实现此方法，需给每个单选按钮设置同一个name属性，并为其添加相同的class。然后使用JS遍历单选按钮组，找到被选中的单选按钮，并获取其value属性即可。

// HTML结构
<input type="radio" name="radioGroup" class="radio-btn" value="选项1">
<input type="radio" name="radioGroup" class="radio-btn" value="选项2">
<input type="radio" name="radioGroup" class="radio-btn" value="选项3">

// JS代码
var radioBtns = document.getElementsByClassName("radio-btn"); // 获取单选按钮组
for (var i = 0; i < radioBtns.length; i++) {
    if (radioBtns[i].checked) { // 判断是否被选中
        console.log(radioBtns[i].value); // 获取选中的值
        break;
    }
}

方法二：使用querySelector获取选中的单选按钮的值

这种方法使用querySelector方法来获取被选中的单选按钮，并直接获取其value属性。

// HTML结构
<input type="radio" name="radioGroup" class="radio-btn" value="选项1">
<input type="radio" name="radioGroup" class="radio-btn" value="选项2">
<input type="radio" name="radioGroup" class="radio-btn" value="选项3">

// JS代码
var radioValue = document.querySelector('input[name="radioGroup"]:checked').value; // 获取选中的值
console.log(radioValue);

以上是两种实现不提交表单获取单选按钮值的方法，可以根据实际需求选择使用。