Handling Checkboxes, Radio Buttons and Select Options in jQuery

I figured I’d share how I’ve dealt with some form elements in jQuery. Sometimes you have to look at the docs a few times before you get what you can do, so I think these examples might help someone out there.

Here is how you can handle a change in a dropdown (SELECT tag with an ID that is “layer_image”):

$("#layer_image").change(function()
{
switch ($(this).val())
{
case '0':
$("#radar_image").hide();
break;
default:
$("#radar_image").show();
}
});

Granted I could of used toggle() to do the same thing I figured it was better to show an example using the switch statement.

Here is an example of handling a checkbox (INPUT tag with an name attribute of “option_linkwindow”):

$("input[@name='option_linkwindow']").click(
function()
{
if ($("input[@name='option_linkwindow']").is(":checked"))
$(".feed/ul>li/a").attr("target","_blank");
else
$(".feed/ul>li/a").attr("target","_self");
$(this).blur();
}
);

Here is another example of handling a checkbox (INPUT tag with a name attribute of “option_summary”):

$("#option_summary").change(
function()
{
$("//li/p").toggle();
$("li[p:hidden]").removeClass("expanded");
$("li[p:visible]").addClass("expanded");
$(this).blur();
}
);

And now an example of handling the following radio buttons:

<input type="radio" name="option_layout" value="0" checked="checked" />
<input type="radio" name="option_layout" value="1" />

And now the jQuery code for handling them:

$("input[@name='option_layout']").change(
function()
{
if ($("input[@name='option_layout']:checked").val())
$(".group").toggleClass("group_vert");
else
$(".group").toggleClass("group_vert");
$(this).blur();
}
);

Tags:

Comments 51-68 of 68 to “Handling Checkboxes, Radio Buttons and Select Options in jQuery”

Pages: 1 2
  1. 51 · blogger says:

    I was without internet and was not able to approve the comments. However, as I mentioned before, this site is not affiliated with the History Channel.

  2. 52 · Anonymous says:

    your code is not working

  3. 53 · blogger says:

    When I wrote the code I believe jQuery 1.2 was out, I can’t remember, but it was 2007 and some things have changed since then. I know xpath selections (only available from a plugin) and the way you point to the name of a input field have changed for sure.

  4. 54 · Dave says:

    Thanks for the technique to get the value of the checked radio button – really appreciated, it works great

  5. 55 · Dan Ruth says:

    Thanks for the great post and comments. This has been a great help!

  6. 56 · new-dev says:

    thanks you.

  7. 57 · Aadil says:

    ‘@name’ attribute is not working, instead removing ‘@’ and keeping only name did worked…

  8. 58 · blogger says:

    the @name was something needed in an older jQuery versions

  9. 59 · saviola says:

    function toggle(divId) {
    var divArray = document.getElementsByTagName(“div”);
    for(i = 0; i < divArray.length; i++){
    if(divArray[i].className == divId){
    if(divArray[i].style.display != 'none'){
    divArray[i].style.display = 'none';
    }else{
    divArray[i].style.display = '';
    }
    }
    }
    }

    See Descriptions

    Hello This is #1
    Hello This is #2
    Hello This is #3
    Hello This is not one of them

  10. 60 · Mehdi says:

    how about to use something like this
    $(“#chbox”).change(function(){
    if($(this).is(“:checked:”))
    {
    //do somthing
    }else{
    //do somthing
    }
    }) ;

  11. 61 · min says:

    thanks a lot for this useful article:-)

    I have 4 group of radiobuttons.the jQuery code for handling ents of radiobuttons just work for the first group.unfortunately it doesn’t work for another group.I appreciate if you can help me.

    thanks in advance.

  12. 62 · Satya says:

    Thanks a lot ..

  13. 63 · def says:

    sorry but this doesnt work for me, its has trouble if the radio button is more than one grup… fyi im using jquery 1.4.2 version .
    and this work for me $(“input[name='option_layout']:checked”).val()
    just remove the @ << cmiiw

  14. 64 · Ozone says:

    Trying to set selected through an set value:

    var target = $(this).attr(‘id’);
    $(‘#destination_folder_id option:eq(target)’).attr(‘selected’, ‘selected’);

    Sadly I cannot make that work.. (an alert(target); shows the correct value.. so it is the option:eq(target) that fails me..

    Any help would be fab..

  15. 65 · Ozone says:

    $(‘#destination_folder_id’).val(target).attr(‘selected’, ‘selected’);
    did the job.. Google is your friend ;-)

  16. 66 · sowjanya says:

    Based on Checkbox selection need to get group of input elements.(i.e, 1 checkboxs,3 radio buttons).Any Help? THanks

  17. 67 · Morten says:

    Great stuff, very helpful!

  18. 68 · Chester says:

    Hi there, I’m trying to get a css checkbox switch to register it’s state once clicked.

    ON
    OFF

Comments 51-68 of 68

Pages: 1 2

Leave a Comment

Comments are reviewed before publishing to prevent spam.