Comments on: jQuery Tip : How to Select Radio/Checkbox Input On Click

By: Ziad

Ziad — Wed, 31 Mar 2010 13:01:30 +0000

Great tip Barry, thanks!

I was trying to do it the other way around but ran into some problem. The code works but only on the last radio button set. Not sure why:

$( function radioHighlight(radioName, className) { radioNameSelector = "input[name='" + radioName + "']"; $(radioNameSelector).click(function() { $(radioNameSelector).parent().removeClass(className); $(radioNameSelector + ':checked').parent().addClass(className); }); }

radioHighlight('beneficiary', 'box_selected'); radioHighlight('trans_type', 'box_selected'); );

My HTML is like this:

By Credit/Debit Card By PayPal By Bank Transfer By Cheque

Thanks again
Ziad

By: Adam

Adam — Tue, 09 Mar 2010 23:48:42 +0000

A problem:

Say you have two radio buttons (yes/no) and you want to trigger a $(“#foo”).show(); event from one of them, but not the other, such that if someone clicks the ‘yes’ option, you get a div to appear, click ‘no’ and nothing appears to happen.

By: Barry Roodt

Barry Roodt — Sun, 20 Dec 2009 19:25:51 +0000

Hi Paul,

Aah ok i see now. .children() returns an array of elements. Well spotted, and thanks for the fix.

By: Paul

Paul — Sat, 19 Dec 2009 22:35:16 +0000

I was experiencing the ‘too much recursion’ error in FF 3.5.6. It seems the click() gets evaluated on the ‘li’ element rather than the included radio button.

Changing the third line to
$(this).addClass('selected').children("input[@type=radio]")[0].click();
did the trick, at least in FF.

And thanks for your nice article, Barry!

By: indialike

indialike — Wed, 16 Dec 2009 08:11:54 +0000

Very nice and useful tutorials to web designers,
Thanks for posting.

By: Barry Roodt

Barry Roodt — Fri, 27 Nov 2009 04:41:04 +0000

I’m not sure that I’m with you, there’s no recursion there.

That piece of code is listening for a click on an LI element. The “.children(“input[type=radio]“).click()” bit is firing a click event on the radio input element directly, not the LI – so no recursion.

Am I missing something ? Do you have an example perhaps.. might make more sense to me then.

Thanks

By: Yue

Yue — Fri, 27 Nov 2009 00:04:26 +0000

I have to say


$('li').click( function(){
		$('li.selected').removeClass('selected');
		$(this).addClass('selected').children("input[@type=radio]").click();
	});

this code can trigger out of memory error in IE8 because of too many recursive event

By: Kiran Kumar

Kiran Kumar — Tue, 28 Jul 2009 16:27:12 +0000

Hi Barry,
thank you for your post, i was just looking for this type of code for radio and checkboxes.

you have given code for radio button. i am also looking for checkboxes, which i didn’t get. could you please help me.

i have an image, a checkbox, file name and a close img button aligned in a . on click of any part of the , the checkbox should be checked and css border should apply for whole which i have clicked. if I click again on the same the css should be remove and check box should be disabled.
(the will be loaded dynamically and id will be unique each time it gets loaded)

please provide me with the code in jquery.

thank you in advance.

with regards,
Kiran Kumar.

By: keithics

keithics — Mon, 11 May 2009 16:27:38 +0000

thanks a lot! saves me time.

“.children” was the key!

By: S.A.K

S.A.K — Wed, 11 Mar 2009 06:52:29 +0000

thanks for your code

really its coll dude