JQuery更改单选按钮的值

Question

我有一个叫做category的变量，必须根据选中的单选按钮更改其值。问题是当我点击单选按钮时，它并不会立即改变值。

这是我现在的代码：

<form>
<input type="radio" name="category" value="doctor" /> Doctor
<input type="radio" name="category" value="police" checked /> Policia
</form>

var category = $('[name="category"]:checked').val();

我需要你在点击单选按钮时自动更改变量category的值。

- Nacho Sarmiento

Answer 1

为 change 事件附加一个事件处理程序：

$(':radio[name="category"]').change(function() {
  var category = $(this).filter(':checked').val();
});

- Blender

---

按照答案所说，你想要使用“change”事件，而不是一些其他人建议的“click”事件。使用“change”可以确保即使用户使用键盘导航并选择单选按钮，也会更新值。 - idrumgood

@albanx：click事件只有在按钮被点击时才会触发（即使它被禁用）。change事件在值改变时触发（无论是通过键盘还是鼠标），但如果按钮被禁用，则不会触发。 - Blender

Answer 2

当用户更改所选的单选按钮时，您需要每次更改类别的值。因此，您需要一个事件来触发用户单击单选按钮时的操作。您可以查看FIDDLE。

var category = null;
$("input[name='category']").click(function() {
    category = this.value;
});

- Jose Vega

---

很好，即使您使用键盘箭头更改所选的单选按钮，它也可以正常运行。 - Jeremy Belolo

Answer 3

var category;
    $(':radio[name="category"]').change(function() {
      category=this.value;
    });

这是一个 jsfiddle.net 演示。

- nima shayanfar

Answer 4

我认为你只需要像这样简单的东西：

var category;

    $('radio[name="category"]').click(function(){
      category=this.value;
    });

- albanx

---

我认为使用“change”事件比“click”更通用。 - T30

Answer 5

您不应该为多个元素分配相同的ID，而应该使用类（class）来代替，例如：

<form>
  Option 1<input type="radio" name="opt" class="radio" value="Option 1">
  Option 2<input type="radio" name="opt" class="radio" value="Option 2">
</form>

而不是：

<form>
  Option 1<input type="radio" name="opt" id="radio" value="Option 1">
  Option 2<input type="radio" name="opt" id="radio" value="Option 2">
</form>

你的代码仍然是相同的，应该可以正常工作 :)

- ala'a alqadi

Answer 6

不要使用category变量，而是在需要选中单选按钮的值时使用$('[name="category"]:checked').val()。否则，您可以利用change或click事件将选中的单选按钮的值设置为category变量。

- ShankarSangoli

---

这是一种直接的方法，而不是实现“change”事件。 - Peter

Answer 7

使用 .change() 捕获单选按钮的更改事件。

- bdparrish