Using Jquery – Check boxes and Radio buttons

Thank u. I using jquery and want alert when i click checkbox

Thanks for your comment Awat. Jquery is simply great!

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 Buddy… That code examples solved a great problem for me… Have a great day!

Thanks Sateesh, for your words!

Thanks for the tip. But in my case it didn’t work until I removed the “@” sign…

Using the latest jQuery release…

If code doesn’t work try:

$(“:input[@name='rdio']“).change(function()

all work correctly

thanx

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.

Mine just worked after using ‘:input’ and not ‘input’

Glad that it worked for you!!!

‘:input’ “Deckard Cain” is right
is there are changes from older version ?

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

Thanks!

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.

Q ASE ESA COSA O KE?

Thanks for your gyan sharing. It help me a lot and saved my precious time. thanks again

found another for finding the value of the checked rb:

str = $(“input[name=addType]:checked”).val();

Gracias, me ha servido de mucho la respuesta.
saludos,

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

Thank You! This helped me save a lot of time.

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.

Hey, I have tried this code but doesn’t work. I just followed the suggestion of other friends in this article. But, no good. This is the request to my friends, who were able to use the code successfully, please post the complete code here. This is going to save lots of time for others. Thanks.

This is not working for me, tried everything to get this working. Can you show an example of a working code for radio buttons? It would help me allot

Thankz for the code but u have to remove @ symbol font from the NAME then its work fine

Excellent dude, It help me a lot, I didn’t need to break my head Thanks so much

During work I was just asked to show/hide elements based on Radio button states using jQuery. Thanks to your short code updated to reflect the latest jQuery which doesn’t use the @name anymore, I was able to do so in a timely manor without any trouble.

thanks man!

Comunico per tutti che la sintassi giusta è:

$(“input[name='chkBox']“).click(function(){
// your code here
});

E NON

$(“input[@name='chkBox']“).click(function(){
// your code here
})

clear and simple !
thank you !!

IE is a bummer !

The presented radio buttons code works perfectly on non-IE browsers.

IE’s change event is triggered *after* deselecting an option (selecting another option after the desired option).

Referring the code above:

on non-IE browsers ….val() == ‘a’ is true when ‘a’ is selected.
on IE ….val() == ‘a’ is true when ‘a’ is deselected.

regarding my comment above:
using click() instead of change() works also for IE

I am getting another problem in IE

$(“input[name='code']“).click(function(){
//my code here
});

I have 2 radio button with name code
it always works with when I click on second but do not work when I click on first radio.

working fine in chrome and safari

Thank you very much this will help mov­ing forward.

well thx dude, ur right just remove the @ . finally found it.

$(“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’
});

This is the same code that I’m searching for ! Thanks!!!!
(Sorry about my english, I’m from Chile.)
Regards !

$getradioValue=$(“input[@name='rdio']:checked”).val();

thats simple methods
and implement itself code according your requirement

Great, great simple and elegant solution I like, I’ve used it and doing quite well.
Thanks!

If I start a blog on Myspace, will it get listed in search engines like Google? If so, is there a way to keep them from being crawled?. . Thank you.

Thanks so much for this small tutorial, you saved my day on developing a backend for a wordpress theme width conditional options depending on other options!!!
::
jQuery(“#checkboxID”).change(function(){
if(jQuery(“#checkboxID”).attr(“checked”) == “checked”)
{
//Do something
}
});
::
Thanx!

Great post…..thanks

These two site also helped a lot:
http://api.jquery.com/checkbox-selector/
http://api.jquery.com/change/

Hi, I couldn’t make the code work. I got a syntax error. I have tried all the suggestions in the post above but i couldn’t make it work still.

This is how my code looks now:

$(document).ready(function() {
$(“input.contentopt-1″).click(function(){
if ($(“input.contentopt-1:checked”).val() == ’1′)
alert(‘Im at a’);
else if ($(“input.contentopt-1:checked”).val() == ’2′)
alert(‘Im at b’);
else
alert(‘Im at c’);
});
});

What could probably be the issue? I have 3 options for the radio buttons. And, i’m using jquery version 1.7.

I really relate to that post. Thanks for the info.