如何使用Jquery获取Form表单中被选中的radio值

要使用jQuery获取表单中被选中的radio值，可以使用以下步骤：

1. 选择所有名称为“radio_button”的radio按钮

var radios = $("input[name='radio_button']");

1. 使用filter函数过滤掉所有没有被选中的按钮

var selected_radio = radios.filter(":checked");

1. 获取选中的按钮的值

var selected_value = selected_radio.val();

综合起来，代码如下：

var radios = $("input[name='radio_button']");
var selected_radio = radios.filter(":checked");
var selected_value = selected_radio.val();
console.log(selected_value);

这应该会在控制台中打印出被选中的radio按钮的值。

以下是两个示例。

示例一

假设我们有一个名称为color的radio按钮组，其中包含red、green和blue三个选项。我们可以使用以下代码来获取被选中的值：

<input type="radio" name="color" value="red"> 红色
<input type="radio" name="color" value="green"> 绿色
<input type="radio" name="color" value="blue"> 蓝色
<button id="btn">获取选中值</button>

<script>
  $("#btn").click(function() {
    var radios = $("input[name='color']");
    var selected_radio = radios.filter(":checked");
    var selected_value = selected_radio.val();
    console.log(selected_value);
  });
</script>

如果用户选中了“红色”，那么控制台会打印出red。

示例二

假设我们有一组基于data属性的radio按钮，每个按钮的data属性都存储了一些额外的信息，我们需要获取选中的按钮的信息。HTML代码如下：

<input type="radio" name="flavors" value="chocolate" data-description="美味的巧克力"> 巧克力
<input type="radio" name="flavors" value="vanilla" data-description="香草味的"> 香草
<input type="radio" name="flavors" value="strawberry" data-description="新鲜的草莓"> 草莓
<button id="btn2">获取选中值</button>

<script>
  $("#btn2").click(function() {
    var radios = $("input[name='flavors']");
    var selected_radio = radios.filter(":checked");
    var selected_value = selected_radio.val();
    var description = selected_radio.data("description");
    console.log(selected_value + " - " + description);
  });
</script>

如果用户选中了“草莓”，那么控制台会打印出strawberry - 新鲜的草莓。