JS 单选radio属性|极客笔记

JS 单选radio属性

在Web开发中，常常会遇到需要实现单选框（radio）的需求。单选框是用于让用户从多个选项中选择一个的输入控件。在HTML中，我们可以通过\标签的type属性来创建单选框。

基本语法

单选框的基本语法如下：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female

在上面的示例中，我们创建了两个单选框，分别表示性别选择。其中，name属性用于指定单选框所属的组，同一个name的单选框只能选择一个。而value属性则用于定义每个单选框的值。

JavaScript操作单选radio

除了静态地创建单选框外，我们还可以使用JavaScript来操作单选框。例如，我们可以通过JavaScript来获取选中的单选框的值。

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="fruit" value="apple"> Apple<br>
<input type="radio" name="fruit" value="banana"> Banana<br>
<input type="radio" name="fruit" value="orange"> Orange<br>

<button onclick="getSelectedValue()">Get Selected Value</button>

<p id="result"></p>

<script>
function getSelectedValue() {
  var inputs = document.getElementsByName('fruit');

  var result = "";
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      result = inputs[i].value;
      break;
    }
  }

  document.getElementById('result').innerText = "Selected Value: " + result;
}
</script>

</body>
</html>

运行结果：当点击按钮时，页面上会显示当前选中的单选框的值。

动态创建单选radio

除了通过静态HTML和JavaScript操作单选框外，我们还可以通过JavaScript动态创建单选框。

<!DOCTYPE html>
<html>
<body>

<div id="radioGroup"></div>
<button onclick="addRadio()">Add Radio</button>

<script>
function addRadio() {
  var radioGroup = document.getElementById('radioGroup');

  var radio = document.createElement('input');
  radio.type = 'radio';
  radio.name = 'color';
  radio.value = 'blue';

  var label = document.createElement('label');
  label.innerHTML = 'Blue';

  radioGroup.appendChild(radio);
  radioGroup.appendChild(label);
}
</script>

</body>
</html>

运行结果：当点击按钮时，页面上会动态添加一个新的单选框和对应的标签。

通过上面的示例，我们可以看到如何使用JavaScript来操作单选框。单选框在Web开发中扮演着重要的角色，合理使用单选框可以提升用户体验。