Using Jquery – Check boxes and Radio buttons
Usage of Jquery is comparatively simple for input type text, button, file, reset etc. because these controls generally hold data but not state like on and off. Check box and radio buttons are two controls which are generally used for state data like option is on/off, one is selected from a group of options etc.
Using jquery is little but different here because you have to use little more that just ID selectors:
Check Box:
<input type="checkbox" name="chkBox" id="chkBox"></input>
Handling click and Change Events :
/* Using Name for selector */ $("input[@name='chkBox']").click(function(){ // your code here }); /* Using ID for selector */ $("#chkBox").change(function(){ // your code here });
Radio Button:
<input type="radio" name="rdio" value="a" checked="checked" /> <input type="radio" name="rdio" value="b" /> <input type="radio" name="rdio" value="c" />
Handling change event for Radio buttons:
Click event can be handled similarly. ID can not be used here because Radio buttons are used for single selection from a group where all input fields of group should have same name.
$("input[@name='rdio']").change(function(){ if ($("input[@name='rdio']:checked").val() == 'a') // Code for handling value 'a' else if ($("input[@name='rdio']:checked").val() == 'b') // Code for handling value 'b' else // Code for handling 'c' });
Most Commented Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Thanks for the great post, helped me a lot with how to make a text field fade in when a radio button is clicked.
But I forgot to mention, Internet Exploiter can do it only when you use .click() instead of .change()
Thanks for the tip. But in my case it didn’t work until I removed the “@” sign…
Using the latest jQuery release…
Hey, if I were currently immersed in writing a book explaining set theory, it would have sounded like that to me too, I’m sure.
Interestingly, this..
$(”:input[@name='rdio']“).change(function()
..will bind the event to all checkbox/radio button inputs, regardless of the name. Removing the ‘@’ worked for me:
$(”input[name='rdio']“).change(function()
Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the ‘@’ symbol from your selectors in order to make them work again.
Thanks for this info friends. If you want the on Change event to work in Internet Explorer, follow this info from another poster on a different blog post.
Posted by Alexander M. Turek on 16 Sep 2009 @ 09:06a UTC
If you click on a radio button, IE seems to wait with firing the change event until you leave the button, which is consistent with the behavior on other input fields (like text), but kinda unintuitive. The following piece of code fixes this behavior for me:
$(function () {
if ($.browser.msie) {
$(‘input:radio’).click(function () {
this.blur();
this.focus();
});
}
});
Hi all,
Nice post. But is it me or does this work strangely?
E.g.
I’ve three radio buttons (email,sms,all). I’ve a div that has 4 checkboxes in it. For each of sms and email 3 different checkboxes are shown in a div which is dynamically added to the DOM when either SMS or Email is slected. When I change from sms or email to all this div is supposed to disappear.
Now what is supposed to happen is going from All to SMS should show the div with the checkboxes that correspond to SMS contained within this div and this should also happen for All to Email. Nothing happens. But if I click from SMS to All or from SMS to Email, which means now the All or Email radio buttons are selected, it then shows the SMS div. In other words the correct div doesn’t appear when I click the radio button only when from that radio button to another. This doesn’t make sense to me.
Any ideas?
Thanks,
JP
This: $(“input[@name='rdio']:checked”).val() won’t work if you got more that 2 groups of radio buttons. jQuery don’t recognize them. Better way is use: $(“input.className:checked”).val();, where className is name of each radio button group.
[...] generally used for state data like option is on/off, one is selected from a group of options etc. Web Site Share and [...]
???,?????? ?? ????? ?? ?????? ????????? ? ??????????!
?????, ????? ?????…, ????????? ?????
?? ???????? ????????
??? ?????????, ?????????? ))) , ??? ????????? 
? ??????, ??? ?? ?????????? ??????. ???? ??? ????????. ?????? ??? ? PM.
found another for finding the value of the checked rb:
str = $(“input[name=addType]:checked”).val();
Just a quick note. jQuery 1.3 got rid of the requirement for the @ and in fact this script above no longer works in jQuery 1.3 or 1.4. Just take out the @. I struggled with this and found out in the jQuery release notes for 1.3 which is when they started taking out the @: http://docs.jquery.com/Release%3ajQuery_1.3#Upgrading
Thankyou fellow web developer. However you say “ID can not be used for radio buttons”. It CAN and this is quite useful actually for example when providing a list of answers to a question in a web form for example “How did you find this blog post (google, yahoo, bing, other)…you could give the ‘other’ option a unique id and when changed have a text field appear to input the other search engine etc. I have done it several times, it works great!
thanks, this was really helpful. I also was able to get mine to work by removing the ‘@’ symbol in all places.
Thanks a lot! I need a help, I want to load a different html page on clicking on a button? anybody can help me?
Thanks for your comment. I need to understand your requirement first. Do you want to load different htmls on the page on click of a button or tab ? let me know your clear requirement and will try to help you. thanks.
Thank u. I using jquery and want alert when i click checkbox