Question

我有一组单选按钮，我想使用jQuery找到所选的单选按钮ID。

这是我的单选按钮，使用以下jQueryCode - 每当我更改单选按钮时，我都会收到“未定义”警告。

$("#radios").on("change", function() {
    myID = $("#radios").nextAll(":radio:checked").first().attr('id');
    alert(myID);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="radios">
   <input id="option1" name="options" type="radio" checked>
   <label value="test" for="option1">X-01</label>
   <input id="option2" name="options" type="radio">
   <label for="option2">X-02</label>
   <input id="option3" name="options" type="radio">
   <label for="option3">X-03</label>
   <input id="option4" name="options" type="radio">
   <label for="option4">M-01</label>
   <input id="option5" name="options" type="radio">
   <label for="option5">M-02</label>
   <input id="option6" name="options" type="radio">
   <label for="option6">M-04</label>
   <input id="option7" name="options" type="radio">
   <label for="option7">L-01</label>
   <input id="option8" name="options" type="radio">
   <label for="option8">L-02</label>
</div>

我做错了什么？

Answer 1

由于单选按钮是#radios div的子项，因此您需要使用$.fn.find()

获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

代码，同时使用单选按钮绑定更改事件

$( "#radios input:radio" ).on( "change", function() {
   myID = $("#radios").find(":radio:checked").first().attr('id');
   alert(myID);
});

注意：您也可以使用$.fn.children()，但.children()方法与.find()不同。

Answer 2

您需要使用find方法获取radio。

$("#radios").on("change", function () {
    myID = $("#radios").find(":radio:checked").first().attr('id');
    //                  ^^^^
    alert(myID);
});

演示：http://fiddle.jshell.net/575Lycoj/

Answer 3

你需要

1）将change事件附加到input元素，而不是附加到id为#radios

的div

2）然后在其中找到checked元素。：

$( "#radios input" ).on( "change", function() {
   myID = $("#radios :radio:checked").first().attr('id');
   alert(myID);
});

Answer 4

$( "#radios" ).on( "change", function() {
myID = $(this).find(":radio:checked").first().attr('id');
  alert(myID);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="radios">
    				<input id="option1" name="options" type="radio" checked>
    				<label value="test" for="option1">X-01</label>

    				<input id="option2" name="options" type="radio">
    				<label for="option2">X-02</label>

    				<input id="option3" name="options" type="radio">
    				<label for="option3">X-03</label>

    				<input id="option4" name="options" type="radio">
    				<label for="option4">M-01</label>

    				<input id="option5" name="options" type="radio">
    				<label for="option5">M-02</label>

    				<input id="option6" name="options" type="radio">
    				<label for="option6">M-04</label>
    				
    				<input id="option7" name="options" type="radio">
    				<label for="option7">L-01</label>
    				
    				<input id="option8" name="options" type="radio">
    				<label for="option8">L-02</label>
    			</div>

Answer 5

检查event上的input并获取已检查电台的id。试试 -

$( "#radios input" ).on( "change", function() {
myID = $("#radios input:radio:checked").attr('id');
  alert(myID);
});

DEMO

Answer 6

虽然更改事件由于冒泡而起作用，但将事件绑定到实际触发更改事件的元素会更好：

$("#radios").on("change", 'input', function() {
  var myID = $("#radios input").filter(":radio:checked").first().attr('id');
  alert(myID);
});

使用Jquery更改检查单选按钮ID

6 个答案: