Handling Checkboxes, Radio Buttons and Select Options in jQuery

I figured I’d share how I’ve dealt with some form elements in . 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: