按名称获取选中的单选按钮值 jquery - Javascript

这个主题将向程序员介绍如何使用jQuery和JavaScript通过名称获取选中的单选按钮值。

HTML

首先，我们需要在HTML中创建一组单选按钮。每个单选按钮都应具有相同的名称属性，但不同的值。

<form>
  <input type="radio" name="fruit" value="apple" checked> Apple
  <input type="radio" name="fruit" value="banana"> Banana
  <input type="radio" name="fruit" value="orange"> Orange
  <input type="radio" name="fruit" value="grape"> Grape
</form>

jQuery

要按名称获取选中的单选按钮值，我们可以使用jQuery的选择器来选择具有特定名称的单选按钮。然后，我们可以使用.filter(':checked')方法过滤选择的单选按钮，只保留选中的按钮。最后，我们使用.val()方法获取选中单选按钮的值。

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

JavaScript

如果您不想使用jQuery库，可以使用原生JavaScript来实现相同的功能。我们可以通过使用document.querySelectorAll()来选择所有具有特定名称的单选按钮，并使用Array.prototype.find()方法来找到选中的按钮。然后，我们可以使用选中的按钮的value属性获取其值。

var selectedValue = Array.from(document.querySelectorAll('input[name="fruit"]')).find(input => input.checked).value;

返回Markdown格式的代码片段

## 按名称获取选中的单选按钮值 jquery - Javascript

这个主题将向程序员介绍如何使用jQuery和JavaScript通过名称获取选中的单选按钮值。

### HTML
首先，我们需要在HTML中创建一组单选按钮。每个单选按钮都应具有相同的名称属性，但不同的值。

```html
<form>
  <input type="radio" name="fruit" value="apple" checked> Apple
  <input type="radio" name="fruit" value="banana"> Banana
  <input type="radio" name="fruit" value="orange"> Orange
  <input type="radio" name="fruit" value="grape"> Grape
</form>

jQuery

要按名称获取选中的单选按钮值，我们可以使用jQuery的选择器来选择具有特定名称的单选按钮。然后，我们可以使用.filter(':checked')方法过滤选择的单选按钮，只保留选中的按钮。最后，我们使用.val()方法获取选中单选按钮的值。

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

JavaScript

如果您不想使用jQuery库，可以使用原生JavaScript来实现相同的功能。我们可以通过使用document.querySelectorAll()来选择所有具有特定名称的单选按钮，并使用Array.prototype.find()方法来找到选中的按钮。然后，我们可以使用选中的按钮的value属性获取其值。

var selectedValue = Array.from(document.querySelectorAll('input[name="fruit"]')).find(input => input.checked).value;