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

Saturday, January 10th, 2009

I've been faced with the following scenario a few times during my web development career : First, you have an unordered list - within each list item you have a radio input. Secondly, when you click on the list item (i.e. the entire container), it must select the radio input and add a css classname of "selected" to the list item, thus highlighting the item that has been selected.
The following example will explain how to implement a workable solution. For a preview of what we will achieve, check out the demo.

The HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<!-- include our jquery scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    <script src="js/radio.js" type="text/javascript"></script>
    <style type="text/css">
    	li { color: #000; }
    	li.selected { color: #FF0000; }
    </style>
</head>
<body>
	<div>
		<ul>
			<li class="test">Test 1 <input type="radio" name="test" /></li>
			<li class="test">Test 2 <input type="radio" name="test" /></li>
			<li class="test">Test 3 <input type="radio" name="test" /></li>
			<li class="test">Test 4 <input type="radio" name="test" /></li>
			<li class="test">Test 5 <input type="radio" name="test" /></li>
		</ul>
	</div>
</body>
</html>

There is nothing out of the ordinary here - just a simple unordered list of radio inputs.
There's a basic stylesheet to highlight "selected" items.

For those of you wondering why I'm including the jQuery library from the Google Code repository :

It saves on bandwidth, it'll load very quickly from Google's CDN.
It'll already be cached if the user has visited a site which also delivers it from Google Code.

Our Javascript/jQuery:

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

As you can see, the actual code involved is short and straightforward - just the way we like it.

First - we tell jQuery to execute the following code once the document has finished loading, ensuring that the DOM has been registered successfully.
Next we bind a click event to all list item elements on the page - you can of course change this to all list items with a class of "myselection" for example ( $("li.myselection").click... )
When a list item is clicked - we first need to remove the "selected" class from any previously "selected" list items.
Now we need to add the "selected" class to the list item which fired the event ( $(this) ).
Finally, we need to make sure that the radio button inside the list item is "clicked" : we do this by using the .children() selector and executing a click() event on the input.

The important bit is the .children("input[@type=radio]") selector. Known as an XPath selector. What we're doing here is telling jQuery to find all all radio inputs inside "this" list item. We then use .click() to..as you guessed it... execute a click event on the returned element (in this case the radio input).

And that's all there is to it. You can read up some more on jQuery selectors here.
I would also highly recommend reading the following article : Improve your jQuery - 25 excellent tips.

If you enjoyed this article, you might consider subscribing to our rss feed to stay updated with all the latest tips and articles!

Digg | Del.icio.us | Stumble | Reddit

ABOUT THIS AUTHOR

Barry Roodt

Barry is a self professed PHP ninja and jQuery guru wannabe. Currently working as a freelancer, his free time is divided between personal projects and trying to help other developers find useful resources and solve common problems. You can learn more about Barry and his work on his website, or you can catch up with him via twitter ( @barryroodt ).

14 Comments

subscribe comments feed

Drew
January 10, 2009 at 7:47 pm

Reply

Great article Barry! I frequently use jQuerys XPath selectors because of how flexible they are with selecting elements. Keep them coming
Barry Roodt
January 10, 2009 at 11:31 pm

Reply

Hi Drew,

Thanks for the feedback, I’ll definitely be adding more tips soon.

And yes, jQuery’s XPath selectors are a godsend. Can’t wait till 1.3 is released, they’ve apparently re-written the selector engine from the ground up, making it more efficient.
Sonda
January 21, 2009 at 3:12 am

Reply

Thanks.BUT: There is no chance to uncheck it on click if it is checkbox.I would like to be able to click, on LI and on checkbox.
Eric Fields
January 27, 2009 at 7:26 am

Reply

Thanks. I was trying to find the radio button and use ’select()’… never would have thought of click().

The radio box does indeed select in my situation, but i wind up with three errors in firebug.

Using 5 radios, i’ve made stars. Check out the code below. Like I said, currently works, but still throws errors in Fb:

var radios = $(‘#rating input[type="radio"]‘);
radios.wrap(”);
var stars = $(‘#rating .star’);
stars.each(function(i){
$(this).hover(function(){
for (var j=0; j < i; j++) {
$(stars[j]).addClass(‘hover’);
};
},function(){
for (var j=0; j < i; j++) {
$(stars[j]).removeClass(‘hover’);
};
}).click(function(){
$(radios[i]).click();
});
});
Eric Fields
January 27, 2009 at 7:26 am

Reply

Well, that didn’t publish cleanly. Here’s a pastie: http://pastie.org/372082
S.A.K
March 10, 2009 at 11:52 pm

Reply

thanks for your code

really its coll dude
keithics
May 11, 2009 at 9:27 am

Reply

thanks a lot! saves me time.

“.children” was the key!
Kiran Kumar
July 28, 2009 at 9:27 am

Reply

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.
Yue
November 26, 2009 at 5:04 pm

Reply

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
- Barry Roodt
  November 26, 2009 at 9:41 pm
  
  Reply
  
  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
  - Paul
    December 19, 2009 at 3:35 pm
    
    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!
  - Barry Roodt
    December 20, 2009 at 12:25 pm
    
    Hi Paul,
    
    Aah ok i see now. .children() returns an array of elements. Well spotted, and thanks for the fix.
indialike
December 16, 2009 at 1:11 am

Reply

Very nice and useful tutorials to web designers,
Thanks for posting.
Adam
March 9, 2010 at 4:48 pm

Reply

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.