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