使用jQuery获取Radio Button的值

文章由Byrx.net分享于2024-04-06 04:04:49评论（308）

在网页开发中，Radio Button是一种常用的表单控件，它通常用于让用户选择一项或多项选项。但在开发中，我们可能需要获取用户所选的选项，以便后续进行相关操作。

举个例子，比如我们开发了一个调查问卷，其中某个问题的选项是单选的Radio Button，当用户选择完成并点击提交按钮后，我们需要获取这个问题的选项值，以便后续进行相关的统计和分析。

接下来，我们将通过一个简单的示例来演示如何使用jQuery获取Radio Button的值。

假设我们有一个包含三个选项的单选Radio Button，HTML代码如下：

<input type="radio" name="radio" value="1">选项1
<input type="radio" name="radio" value="2">选项2
<input type="radio" name="radio" value="3">选项3

我们需要获取用户所选的选项值，可以通过以下jQuery代码来实现：

var selectedValue = $('input[name="radio"]:checked').val();
console.log(selectedValue);

其中，input[name="radio"]表示选取所有name属性为radio的<input>标签；:checked表示选取所有被选中的Radio Button；.val()方法表示获取选中Radio Button的值。

在实际开发中，我们可能需要获取多个Radio Button的值，可能是同一组中的多个选项，也可能是不同组中的多个选项。这时，我们可以通过以下jQuery代码来获取所有选中的Radio Button的值：

var selectedValues = [];
$('input[type="radio"]:checked').each(function() {
  selectedValues.push($(this).val());
});
console.log(selectedValues);

其中，input[type="radio"]表示选取所有<input>标签中type属性值为radio的标签；.each()方法表示遍历选中的Radio Button；$(this).val()表示获取当前遍历到的Radio Button的值，并将其添加到selectedValues数组中。

使用jQuery获取Radio Button的值并不难，只需要掌握上述方法便可轻松实现。当然，在实际开发中，具体代码可能会因需求的不同而略有差异，但核心思路是相通的。

热门文章：