博客

input-radio(单选框)值的获取/默认选中等操作

  • Post category:other

以下是关于“input-radio(单选框)值的获取/默认选中等操作”的完整攻略，包含两个示例说明。

获取input-radio(单选框)的值

要获取input-radio(单选框)的值，可以使用JavaScript中的document.querySelector()方法来获取选中的单选框元素，然后使用checked属性来判断该单选框是否被选中，最后使用value属性来获取该单选框的值。以下是一个示例：

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<button onclick="getRadioValue()">Get Value</button>

<script>
function getRadioValue() {
  var gender = document.querySelector('input[name="gender"]:checked').value;
  alert("Gender: " + gender);
}
</script>

在这个示例中，我们创建了两个单选框，一个男性和一个女性，并将男性单选框设置为默认选中。然后，我们使用JavaScript中document.querySelector()方法来获取选中的单选框元素，使用checked属性来判断该单选框是否被选中，最后使用value属性来获取该单选框的值。当用户单“Get Value”按钮时，将调用getRadioValue()函数来获取选中的单选框的值，并使用alert()方法将其显示在弹窗口中。

设置input-radio(单选框)的默认选中值

要设置input-radio(单选框)的默认选中值，可以在单选框元素中使用checked属性来指定哪个单选框应该被选中。是一个示例：

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

在这个示例中，我们将男性单选框设置为默认选中，通过在男性单选框元素中使用checked属性来实现。

示例2：使用JavaScript设置input-radio(单选框)的默认选中值

以下是一个示例，展示如何使用JavaScript设置input-radio(单选框)的默认选中值：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<button onclick="setDefaultRadio()">Set Default</button>

<script>
function setDefaultRadio() {
  var radios = document.getElementsByName('gender');
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === 'male') {
      radios[i].checked = true;
    }
  }
}
</script>

在这个示例中，我们创建了两个单选框，一个男性和一个女性。然后，我们使用JavaScript中的document.getElementsByName()方法来获取所有的单选框素，并使用for循环遍历每个单选框元素。在循环中，我们使用if语句来判断当前单选框元素的值是否为“male”，如果是，则将该单选框元素的checked属性设置为true，以将其设置为默认选中。当用户单击“Set Default”按钮时，将调用setDefaultRadio()`函数来设置男性单选框为默认中。

结论

要获取input-radio(单选框)的值，可以使用JavaScript中的document.querySelector()方法来获取选中的单选框元素，然后使用checked属性来判断该单选框是否被选中，最后使用value属性来获取该单选框的值。要设置input-radio(单选框)的默认选中值，可以在单选框元素中使用checked属性来指定哪个单选框应该被选中，或者使用JavaScript来设置默认选中值。

Tags: