如何在 jQuery 中获取单选按钮的值 - Javascript

在开发中，我们经常需要获取单选按钮的值。在 jQuery 中，我们可以通过以下方式轻松地获取单选按钮的值。

获取单选按钮的值

使用 .val() 方法

在 jQuery 中，我们可以使用 val() 方法来获取单选按钮的值。首先，我们需要创建一个 input 标签，并将 type 属性设置为 radio。接下来，我们可以使用 val() 方法来获取单选按钮的值。

<!-- HTML 代码 -->
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// JavaScript 代码
$(document).ready(function(){
  $('input[name=gender]').change(function(){
    var gender = $('input[name=gender]:checked').val();
    console.log(gender);
  });
});
</script>

在上面的代码中，我们使用 $('input[name=gender]').change() 方法来监听单选按钮的变化。当单选按钮的值发生变化时，我们使用 $('input[name=gender]:checked').val() 方法来获取被选中的单选按钮的值。

使用 .filter() 方法

除了上述方法，我们还可以使用 filter() 方法来获取单选按钮的值。您可以将 filter() 方法用于选定单选按钮的属性或属性值。

<!-- HTML 代码 -->
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// JavaScript 代码
$(document).ready(function(){
  $('input[name=gender]').change(function(){
    var gender = $('input[name=gender]').filter(':checked').val();
    console.log(gender);
  });
});
</script>

在上面的代码中，我们使用 $('input[name=gender]').filter(':checked').val() 方法来获取被选中的单选按钮的值。我们设置了 filter() 方法来筛选选定单选按钮的属性或属性值。

结论

在本文中，我们讨论了两种方法来获取单选按钮的值。第一种方法是使用 val() 方法，而第二种方法是使用 filter() 方法。这两种方法都非常简单易行，您可以根据需求选择哪种方法来使用。