Handling Checkboxes, Radio Buttons and Select Options in jQuery

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: jquery