js简单获取表单中单选按钮值的方法

下面我来详细讲解 “js简单获取表单中单选按钮值的方法”。

1. HTML部分

首先，我们需要在HTML代码中定义一个表单，并在表单内部添加一个单选框。例如，我们可以在表单中添加两个单选框，分别用于选择“男性”和“女性”，代码如下所示：

<form>
  <label>
    <input type="radio" name="gender" value="male" checked>
    男性
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    女性
  </label>
</form>

在上面的代码中，我们首先创建了一个表单，然后在表单内部添加了两个单选框，分别用于选择“男性”和“女性”。其中，每个单选框都有一个“name”属性和一个“value”属性。我们可以通过“name”属性将这两个单选框绑定在一起，这样用户在做出选择后，只会提交其中一个单选按钮的值。

2. JavaScript部分

在 HTML中，我们已经完成了单选按钮的定义。接下来，我们需要用 JavaScript 来获取单选按钮的值。为了方便，我们将使用 jQuery 这个 JavaScript 库来完成这个任务。

在获取单选按钮的值之前，我们首先需要确定哪个单选框被选中了。可以使用以下的 jQuery 代码来获取被选中的单选框的值：

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

在上述代码中，我们首先使用了 jQuery 的选择器来选择所有“name”属性为“gender”的单选框。然后，我们使用“:checked”来选取被选中的单选框，最后使用“val()”函数来获取被选中的单选框的值。如果用户不选择任何一个单选框，gender变量将会是 undefined。

下面是一个完整的示例，用于演示如何在表单中获取单选按钮的值：

<!DOCTYPE html>
<html>
<head>
  <title>获取单选按钮的值</title>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <form>
    <label>
      <input type="radio" name="gender" value="male" checked>
      男性
    </label>
    <label>
      <input type="radio" name="gender" value="female">
      女性
    </label>
    <button type="button" onclick="showGender()">确定</button>
  </form>
  <p>您选择的性别是:<span id="gender"></span></p>

  <script>
    function showGender() {
      var gender = $("input[name='gender']:checked").val();
      $("#gender").text(gender);
    }
  </script>
</body>
</html>

在上面的代码中，我们添加了一个“确定”按钮，并将其与 showGender()函数关联。当用户点击该按钮时，showGender()函数将被调用，该函数将获取单选框的值，并将其显示在页面上。

3. 示例说明

下面是两个关于如何获取单选按钮的值的实际示例：

示例一

假设我们要创建一个新用户的注册页面，其中包含一个单选框，用于选择用户的性别。我们可以使用以下的 HTML 代码来定义这个单选框：

<h2>注册新用户</h2>

<form>
  <label>
    <input type="radio" name="gender" value="male" checked>
    男性
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    女性
  </label>

  <input type="submit" value="注册">
</form>

在用户选择性别并提交表单之后，我们可以使用以下的 JavaScript 代码来获取用户选择的性别：

$("form").submit(function(event) {
  event.preventDefault();
  var gender = $("input[name='gender']:checked").val();
  alert("您的性别是：" + gender);
});

在上述代码中，我们使用了 jQuery 的 submit() 函数来捕获表单的提交事件，并使用 preventDefault() 方法阻止浏览器默认的表单提交行为。然后，我们获取被选中的单选框的值，并在弹出框中显示用户选择的性别。

示例二

我们可以通过动态改变单选按钮来实现更多有趣的功能。例如，我们可以使用以下的 HTML 代码来定义一个单选框列表：

<h2>选择自己的宠物</h2>

<form>
  <label>
    <input type="radio" name="pet" value="dog" checked>
    狗
  </label>
  <label>
    <input type="radio" name="pet" value="cat">
    猫
  </label>
  <label>
    <input type="radio" name="pet" value="fish">
    鱼
  </label>
</form>

我们可以使用以下的 jQuery 代码来动态改变单选框：

$("input[value='fish']").prop("disabled", true);

在上述代码中，我们使用了 jQuery 的 prop() 函数来将name属性为“pet”并且value属性为“fish”的单选框禁用。这意味着，该单选框将无法选择，并且在提交表单时不会包含在内。

通过动态改变单选框，我们可以根据特定的条件来限制用户的选择，并且根据用户的选择对页面内容进行适当的更改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js简单获取表单中单选按钮值的方法 - Python技术站

js简单获取表单中单选按钮值的方法

1. HTML部分

2. JavaScript部分

3. 示例说明

示例一

示例二

相关文章