//To uncheck by default checked radio button
$("input:radio[name='radioButtonName']").attr("checked",false); |
//To check particular radio button with starting index 0 or 1 or 2
$("input:radio[name='radioButtonName']")[0].checked = true; |
//To get the value of selected radio button
$("input:radio[name='radioButtonName']:checked").val(); |
//To get the text(display text in radio button label) of selected radio button
$("input:radio[name='radioButtonName']:checked").parent().text(); |
//To get the index of selected radio buttons
var temp = $("input:radio[name='radioButtonName']");var selectedIndex = temp.index(temp.filter(":checked")); |
| EXAMPLE PROGRAM |
| <html> <head> <style> .addSelColor { color: red; } .MyCssClass { background-color: green; cursor: pointer; border: 2px solid yellow; } </style> <script src="jquery.js"></script> <script> $(document).ready(function() { alert("Jquery is Loaded"); $("input:radio[name=sex]").change(function() { alert($(this).val()); $(".radioClass").parent().removeClass("addSelColor"); //for css $(".radioClass:checked").parent().addClass("addSelColor"); //for css }); $("#ClearButton").click(function() { $("input:radio[name=sex]").attr("checked",false); }); $("#selectMale").click(function() { $("input:radio[name=sex]")[0].checked = true; $(".radioClass").parent().removeClass('addSelColor'); //for css $(".radioClass:checked").parent().addClass('addSelColor'); //for css }); $("#selectFemale").click(function() { $("input:radio[name=sex]")[1].checked = true; $(".radioClass").parent().removeClass("addSelColor"); //for css $(".radioClass:checked").parent().addClass("addSelColor"); //for css }); $("#hideButton").click(function() { $("#radioDiv").hide(); }); $("#showButton").click(function() { $("#radioDiv").show(); }); $("#getVal").click(function() { var temp=$("input:radio[name=sex]:checked").val(); alert(temp); }); $("#getText").click(function() { var temp=$("input:radio[name=sex]:checked").parent().text(); alert(temp); }); $("#getIndex").click(function() { var temp = $("input:radio[name=sex]"); var selectedIndex = temp.index(temp.filter(":checked")); alert(selectedIndex); }); $("#acss").click(function() { $("label[for=male]").addClass("MyCssClass"); $("label[for=female]").addClass("MyCssClass"); }); $("#rcss").click(function() { $("label[for=male]").removeClass("MyCssClass"); $("label[for=female]").removeClass("MyCssClass"); }); }); </script> </head> <body> <div id="radioDiv"> <label for="male"> <input type="radio" class="radioClass" name="sex" value="BOY" checked>MALE<input> </label> <label for="female"> <input type="radio" class="radioClass" name="sex" value="GIRL">FEMALE</input> </label> </div></br> <button id="ClearButton">Reset</button></br> <button id="selectMale">Male</button></br> <button id="selectFemale">FeMale</button> </br> <button id="hideButton">Hide Radio Buttons</button></br> <button id="showButton">Show Radio Buttons</button></br> <button id="getVal">Get Selected Value</button></br> <button id="getText">Get Selected Text</button></br> <button id="getIndex">Get Selected Index</button></br> <button id="acss">ApplyCss</button></br> <button id="rcss">RemoveCss</button></br> </body> </html> |
