新老版本juqery获取radio对象的方法

获取radio对象的方法在新老版本jQuery中有些不同，下面将为大家详细讲解。

jQuery 1.6版本之前的获取radio对象方法

在jQuery 1.6版本之前，可以使用如下代码获取一个radio对象：

var radio = $("input[@type=radio][@name=radio_name]:checked");

其中，radio_name是radio按钮组的名称，如果你的radio按钮组的名称为gender，那么这个代码可以改为：

var radio = $("input[@type=radio][@name=gender]:checked");

代码说明：

• 使用$()来选取符合条件的元素，这个元素可以是任意的元素，例如div、input等等。
• 在选取元素时，我们使用了选择器的语法。选择器的格式是[attribute=value]，其中attribute是元素的属性名，value是该属性对应的值。在这个例子中，我们选取了type属性为radio、name属性为radio_name的元素，并且限定了其选中状态为checked。这样就可以得到被选中的radio按钮对象了。

jQuery 1.6版本及之后的获取radio对象方法

在jQuery 1.6版本及之后，由于@选择器被废弃了，因此我们需要改变一下获取radio对象的方法：

var radio = $("input[type=radio][name=radio_name]:checked");

其中，radio_name是radio按钮组的名称，例如：

var radio = $("input[type=radio][name=gender]:checked");

代码说明：

• 使用$()来选取符合条件的元素，这个元素可以是任意的元素，例如div、input等等。
• 在选取元素时，我们使用了选择器的语法。选择器的格式是[attribute=value]，其中attribute是元素的属性名，value是该属性对应的值。在这个例子中，我们选取了type属性为radio、name属性为radio_name的元素，并且限定了其选中状态为checked。这样就可以得到被选中的radio按钮对象了。

示例1：

HTML代码：

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
</form>

<button id="getResult">获取结果</button>

JavaScript代码：

$("#getResult").click(function(){
  $("input[type=radio][name=gender]").each(function(){
    if($(this).is(":checked")){
      alert($(this).val());
    }
  });
});

运行结果：点击“获取结果”按钮会弹出“male”。

示例2：

HTML代码：

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

<button id="getResult">获取结果</button>

JavaScript代码：

$("#getResult").click(function(){
  var radio = $("input[type=radio][name=fruit]:checked");
  alert(radio.val());
});

运行结果：点击“获取结果”按钮会弹出“apple”。