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

By: anil

anil — Tue, 28 Jun 2011 20:58:57 +0000

Hi,

What I have to do if my radio buttons are side by side?

Thanks for Help.

By: Daniel

Daniel — Thu, 10 Mar 2011 23:29:07 +0000

This is the exact script I was looking for however it is not functional with versions of jquery greater than 1.4.4

My solution was changing .click() attribute as shown below.


    $(document).ready(function(){

	$('span').click( function(){

		$(this).children('input:radio').attr("checked", true);

		});

	});

By: dan

dan — Tue, 07 Dec 2010 10:02:55 +0000

Hi,

just what i needed ! but i am already using http://code.jquery.com/jquery-latest.js in my page which does not work with your script and
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

i can not use!

do you know how to get it to work with jquery-latest.js??

hope there is away ??? and you can help….

By: Some0ne

Some0ne — Sun, 15 Aug 2010 03:25:41 +0000

Im using this for radio options but need this for multiple radio options on same page? ...ive tried changing each id eg: $('li.radio').click( function(){ $('li.radio2').click( function(){ $('li.radio3').click( function(){ but that dosent seem to work ...

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