Saturday, August 6, 2011

YUI 3: get selected value of radio buttons group

var value = Y.one('[name=reportOptions]:checked').get('value');


Sample page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title></title>

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

<script type="text/javascript">

YUI().use("node", "selector-css3", function(Y) {

Y.on("domready", function() {

var btn = Y.one('#btnTest')

btn.on('click', testFunction);

});



function testFunction() {

var value = Y.one('[name=reportOptions]:checked').get('value');

alert(value)

}

});

</script>

</head>

<body>



<ul>

<li><input name="reportOptions" id="reportOptions_1" value="1" type="radio" /> reportOptions_1</li>

<li><input name="reportOptions" id="reportOptions_2" value="2" type="radio" /> reportOptions_2</li>

</ul>



<input type="button" value="Submit" id="btnTest" />

</body>

</html>