[英]Checked Radio Buttons ID using Jquery change
I have a set of radio buttons which I'd like to find the selected radio buttons ID using jQuery. 我有一组单选按钮,我想使用jQuery查找选定的单选按钮ID。
That is my set of Radio Buttons, With the following jQueryCode - I'm receiving an 'Undefined' alert whenever I change radio buttons. 这是我的单选按钮集,带有以下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>
What am I doing wrong? 我究竟做错了什么?
As radio buttons are children of #radios
div, You need to use $.fn.find()
由于单选按钮是
#radios
div的子级,因此您需要使用$.fn.find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
获取当前匹配元素集中每个元素的后代,并通过选择器,jQuery对象或元素进行过滤。
Code , Also bind change event with radio buttons 代码 ,还可以通过单选按钮绑定更改事件
$( "#radios input:radio" ).on( "change", function() {
myID = $("#radios").find(":radio:checked").first().attr('id');
alert(myID);
});
Note: You can also use $.fn.children()
, However The .children()
method differs from .find()
. 注意:您也可以使用
$.fn.children()
,但是$.fn.children()
.children()
方法与.find()
不同。
You need to use find
method to get the radio
. 您需要使用
find
方法来获取radio
。
$("#radios").on("change", function () {
myID = $("#radios").find(":radio:checked").first().attr('id');
// ^^^^
alert(myID);
});
Demo: http://fiddle.jshell.net/575Lycoj/ 演示: http : //fiddle.jshell.net/575Lycoj/
You need to 你需要
1) Attach the change event to input element rather than attaching to div with id #radios
1)将change事件附加到输入元素,而不是附加到ID为
#radios
div
2) and then find checked element in it. 2),然后在其中找到选中的元素。 :
:
$( "#radios input" ).on( "change", function() {
myID = $("#radios :radio:checked").first().attr('id');
alert(myID);
});
$( "#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>
While the change event works due to bubbling, it would be nicer to bind the event to elements which actually fire the change event: 尽管change事件由于冒泡而起作用,但将事件绑定到实际触发change事件的元素会更好:
$("#radios").on("change", 'input', function() {
var myID = $("#radios input").filter(":radio:checked").first().attr('id');
alert(myID);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.