js获取单选按钮的数据

获取单选按钮的数据在实际应用中非常常见，以下是 js 获取单选按钮数据的完整攻略：

1. 获取单选按钮的选中状态

要获取单选按钮的数据，首先需要知道单选按钮的选中状态。单选按钮的选中状态可以通过其 checked 属性来获取。checked 属性是一个布尔值，表示单选按钮是否被选中。若该属性为 true，则表示单选按钮被选中。

下面是获取单选按钮的选中状态的基本方法：

var radioButton = document.getElementById('radioBtn');
if (radioButton.checked) {
  // 单选按钮被选中
} else {
  // 单选按钮未选中
}

以上代码中，我们首先通过 document.getElementById() 方法获取单选按钮的 DOM 元素，然后通过 checked 属性获取单选按钮的选中状态。

2. 获取单选按钮的值

在 HTML 中，每个单选按钮都有一个 value 属性，该属性用于标识单选按钮所代表的值。我们可以通过该属性获取单选按钮的值。

下面是获取单选按钮值的基本方法：

var radioButton = document.getElementById('radioBtn');
var value = radioButton.value;

以上代码中，我们首先通过 document.getElementById() 方法获取单选按钮的 DOM 元素，然后通过 value 属性获取单选按钮的值。

3. 示例说明1：获取单选按钮选中的值

下面是一个实际的示例，用于获取单选按钮选中的值：

HTML 代码：

<input type="radio" name="fruit" id="apple" value="Apple">
<label for="apple">苹果</label>

<input type="radio" name="fruit" id="orange" value="Orange">
<label for="orange">橘子</label>

<input type="radio" name="fruit" id="banana" value="Banana">
<label for="banana">香蕉</label>

JavaScript 代码：

var radioButtons = document.getElementsByName('fruit');
for (var i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
    alert('你选中了 ' + radioButtons[i].value);
    break;
  }
}

以上代码中，我们首先通过 document.getElementsByName() 方法获取所有 name 属性为 "fruit" 的单选按钮的 DOM 元素，然后遍历每个单选按钮，通过 checked 属性获取单选按钮的选中状态。若选中状态为 true，则通过 value 属性获取单选按钮的值。

4. 示例说明2：将单选按钮的值添加到 URL 中

下面是另一个实际的示例，用于将单选按钮的值添加到 URL 中：

HTML 代码：

<input type="radio" name="gender" id="male" value="male" checked>
<label for="male">男</label>

<input type="radio" name="gender" id="female" value="female">
<label for="female">女</label>

JavaScript 代码：

var radioButtons = document.getElementsByName('gender');
var url = 'https://example.com/?';

for (var i = 0; i < radioButtons.length; i++) {
  if (radioButtons[i].checked) {
    url += 'gender=' + radioButtons[i].value;
    break;
  }
}

location.href = url;

以上代码中，我们首先通过 document.getElementsByName() 方法获取所有 name 属性为 "gender" 的单选按钮的 DOM 元素，然后遍历每个单选按钮，通过 checked 属性获取单选按钮的选中状态。若选中状态为 true，则通过 value 属性获取单选按钮的值，并将其添加到 URL 中。最后将 URL 赋值给 location.href 属性，完成页面跳转。