jQuery如何使用class获取多个单选框的值

原创

mob649e816a77bf 2023-12-30 04:35:27 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e816a77bf的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用jQuery获取多个单选框的值

在前端开发中，我们经常需要获取多个单选框的值，以便进行相应的操作。使用jQuery可以很方便地实现这一需求。本文将介绍如何使用jQuery的class选择器来获取多个单选框的值。

HTML结构

首先，我们需要在HTML中创建多个单选框。以下是一个简单的示例：

<div class="radio-group">
  <input type="radio" name="color" value="red">红色
  <input type="radio" name="color" value="blue">蓝色
  <input type="radio" name="color" value="green">绿色
</div>

在这个示例中，我们创建了一个名为color的单选框组，其中包含了三个单选框，分别对应红色、蓝色和绿色。

使用jQuery获取单选框的值

要使用jQuery获取单选框的值，我们需要使用class选择器来选择所有的单选框元素。在本例中，我们可以使用.radio-group input[type="radio"]来选择所有的单选框元素。

然后，我们可以使用jQuery的.each()方法遍历每个选择到的单选框元素，并使用.val()方法获取其值。以下是完整的代码示例：

$('.radio-group input[type="radio"]').each(function() {
  var value = $(this).val();
  console.log(value);
});

在这个示例中，我们使用.each()方法遍历了所有的单选框元素，并使用$(this).val()来获取每个单选框的值，并将其打印到控制台。

如果你希望将这些值存储到一个数组中，可以使用以下代码：

var values = [];
$('.radio-group input[type="radio"]').each(function() {
  var value = $(this).val();
  values.push(value);
});
console.log(values);

在这个示例中，我们创建了一个空数组values，然后在每次遍历单选框元素时，将每个单选框的值添加到数组中。最后，我们将整个数组打印到控制台。

完整示例

以下是一个完整的示例，展示了如何使用jQuery获取多个单选框的值并将其存储到一个数组中：

<!DOCTYPE html>
<html>
<head>
  <title>获取多个单选框的值</title>
  <script src="
</head>
<body>
  <div class="radio-group">
    <input type="radio" name="color" value="red">红色
    <input type="radio" name="color" value="blue">蓝色
    <input type="radio" name="color" value="green">绿色
  </div>

  <script>
    $(document).ready(function() {
      var values = [];
      $('.radio-group input[type="radio"]').each(function() {
        var value = $(this).val();
        values.push(value);
      });
      console.log(values);
    });
  </script>
</body>
</html>

在这个示例中，我们使用了$(document).ready()来确保页面加载完成后再执行JavaScript代码。然后，我们使用与前面示例相同的逻辑来获取单选框的值，并将其存储到数组values中。最后，我们将整个数组打印到控制台。