jQuery 改变方法

在本文中，我们将介绍如何使用 jQuery 中的 .change() 方法来处理一组单选按钮的改变事件。

什么是 .change() 方法

jQuery 的 .change() 方法用于绑定一个改变事件处理程序，当元素的值发生改变时，该处理程序会被触发。对于一组单选按钮而言，当其中一个按钮被选中时，其他按钮的选中状态会自动取消。因此，可以使用 .change() 方法来监听单选按钮组的改变事件，并实现一些相应的逻辑。

使用 .change() 方法监听单选按钮组的改变事件

要使用 .change() 方法来监听单选按钮组的改变事件，我们首先需要选中该组单选按钮的共同父级元素，然后使用 .on() 方法来绑定改变事件处理程序。

例如，假设我们有一组单选按钮，它们的父级元素的 id 为 “radioGroup”，每个单选按钮的 class 为 “radioButton”。我们可以使用下面的代码来监听该组单选按钮的改变事件：

$("#radioGroup").on("change", ".radioButton", function() {
  // 在这里编写处理改变事件的逻辑
});

获取选中的单选按钮的值

在改变事件处理程序中，我们经常需要获取到选中的单选按钮的值。可以使用 jQuery 的 :checked 选择器来选中被选中的单选按钮，然后使用 .val() 方法来获取其值。

例如，假设我们要在单选按钮组改变事件发生时，获取选中的单选按钮的值并输出到控制台。我们可以通过下面的代码实现：

$("#radioGroup").on("change", ".radioButton", function() {
  var selectedValue = $('input[name="radioButton"]:checked').val();
  console.log(selectedValue);
});

动态创建单选按钮并监听其改变事件

有时候，我们需要动态地创建单选按钮，并且想要在单选按钮被添加到文档中后立即监听其改变事件。可以使用动态生成的单选按钮的父级元素来绑定 .change() 方法，以确保所有的单选按钮事件都被捕获到。

例如，下面的代码会动态创建一个单选按钮，并监听其改变事件：

var radioButton = ("<input>").attr({
  type: "radio",
  name: "radioButton",
  value: "Option"
});("#radioGroup").append(radioButton);

$("#radioGroup").on("change", ".radioButton", function() {
  // 处理改变事件的逻辑
});