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();
}
);
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.
your code is not working
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.
Thanks for the technique to get the value of the checked radio button – really appreciated, it works great
Thanks for the great post and comments. This has been a great help!
thanks you.
‘@name’ attribute is not working, instead removing ‘@’ and keeping only name did worked…
the @name was something needed in an older jQuery versions
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
how about to use something like this
$(“#chbox”).change(function(){
if($(this).is(“:checked:”))
{
//do somthing
}else{
//do somthing
}
}) ;
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.
Thanks a lot ..
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
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..
$(‘#destination_folder_id’).val(target).attr(‘selected’, ‘selected’);
did the job.. Google is your friend 😉
Based on Checkbox selection need to get group of input elements.(i.e, 1 checkboxs,3 radio buttons).Any Help? THanks
Great stuff, very helpful!
Hi there, I’m trying to get a css checkbox switch to register it’s state once clicked.
ON
OFF