在HTML和CSS中从一个单选按钮中获取所选值的多种方法本教程展示了在HTML和CSS中从一个单选按钮中获取所选值的多种

本教程展示了在HTML和CSS中从一个单选按钮中获取所选值的多种方法。

单选按钮是一个UI元素，用于在表单中从一个按钮列表中选择一个值。

它是在按钮中显示数据的一种方式，可以从多个值中获得一个值。

让我们在HTML中创建一个单选按钮。

一个单选按钮是用type=radio的输入标签创建的。创建了三个按钮，名称相同的性别每个单选按钮的值是不同的。

使用type="button "的输入标签来显示Html按钮。点击事件处理程序与一个javascript函数相连。


<!DOCTYPE html>
<html>

<head>
  <title>Radio Button  demo</title>
</head>

<body>
  <label for="gender">Gender: </label>
  <input type="radio" name="gender" value="male" checked="checked">Male</input>
  <input type="radio" name="gender" value="female">Female</input>
  <input type="radio" name="gender" value="both">Both</input>
  <input type="submit" value="submit" onclick="submitData()">
</body>

</html>

下面是一个函数代码submit button onClick event

function submitData(){
    console.log("Submit function")
}

让我们看看如何通过点击提交按钮来获得所选单选按钮的值。

如何用javascript在HTML中获取选中的单选按钮的值？

Javascript提供了DOM API，可以使用选择器获得UI元素的值。

使用文档查询选择器

document.querySelector() 根据选择器返回匹配的元素，如果没有找到匹配的元素则返回null。

语法:

document.querySelector(selector).

选择器可以是一个元素ID或类选择器。

首先，使用选择器选择单选按钮，Selected被用作input[name="gender"] ，它返回三个单选按钮。

使用: checked 伪选择器来选择选中的单选按钮。

下面是一个javascript代码的例子

function submitData(){
    let value=document.querySelector('input[name="gender"]:checked').value;
        let value=document.querySelector('input[name="gender"]:checked').value;

    console.log(value)
}

使用getElementsByName函数

getElementsByName() 函数使用名称选择器返回元素。

它返回一个元素的数组。

遍历数组并使用**.checked**属性检查元素是否被选中。

下面是一个示例代码。

function submitData() {
  var genders = document.getElementsByName("gender");
   for (var i = 0, length = genders.length; i < length; i++) {
    if (genders[i].checked) {
      console.log(genders[i].value);
      break;
    }
  }
}

使用Id选择器

HTML单选元素添加了相同或不同的id标签。你可以使用getElementById API来检索选中的值。

document.getElementById("malegender").checked返回布尔值true or false。

  <label for="gender">Gender: </label>
  <input type="radio" id="malegender" name="gender" value="male" checked="checked">Male</input>
  <input type="radio" id="femalegender" name="gender" value="female">Female</input>
  <input type="radio"  id="bothgender"name="gender" value="both">Both</input>
  <input type="submit"  value="submit" onclick="submitData()">

如果男性单选按钮被选中，它的返回值如下

function submitData() {
    console.log(document.getElementById("malegender").checked); // true
    console.log(document.getElementById("femalegender").checked); // false
    console.log(document.getElementById("bothgender").checked); // false
}

Jquery获取选中的单选按钮的值。

JQuery是一个javascript库，如果你在你的项目中使用它，你可以使用jquery选择器语法获得一个单选按钮。

我们有多种方法可以在jquery中获得HTML单选的值。

$('input[name="gender"]:checked').val();

如果你对所有的单选按钮使用相同的ID，你可以使用以下代码

$("#gender:checked").val();

使用ID选择器如果ID被分配给每个单选按钮是唯一的，如下所示

   <input type="radio" id="malegender" name="gender" value="male" checked="checked">Male</input>
  <input type="radio" id="femalegender" name="gender" value="female">Female</input>
  <input type="radio"  id="bothgender"name="gender" value="both">Both</input>4

你可以使用ID来获取

   $("#malegender:checked").val();
   $("#femalegender:checked").val();
   $("#bothgender:checked").val();

结语

总结一下，用例子说明在javascript和JQuery中检索单选按钮值的多种方法。