How to use jQuery to select a radio button from parent element
A friend asked me for some help on doing the following :
1. You have an unordered list – within each list item you have a radio input.
2. When you click on the list item (i.e. the entire container), it must a) select the radio input and b) add a css classname of “selected” to the list item.
First, 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.
Next, the js (radio.js) :
$(document).ready(function(){ $('li').click( function(){ $('li.selected').removeClass('selected'); $(this).addClass('selected'); $(this).children("input[type=radio]").click(); }); });
1. First – we tell jQuery to execute the following code once the document has finished loading, ensuring that the DOM has been registered successfully.
2. 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… )
3. When a list item is clicked – we first need to remove the “selected” class from all other list items.
4. Now we need to add the “selected” class to the list item which fired the event ( $(this) ).
5. 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 $(this).children(“input[type=radio]”) selector. What we’re doing here is telling jQuery to find all inputs of type radio (i.e. all radio inputs) inside “this” list item (i.e. the list item which was clicked on). 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.
Leave a comment Cancel reply
Archives
Recent Posts
Top Posts
- Yet another list of 'extremely useful' jQuery plugins
- Advanced radio button grouping with jQuery
- Mobile App Development - Snake Guide for South Africa
- Howto: Create custom thumbnails from Flutter image fields
- Simplifying Flutter duplicate groups and fields
- Circular Image Slide with jQuery
- 6 jQuery snippets you can use to manipulate select inputs
- How to validate Date of Birth with jQuery
- Still alive and kicking
- jQuery plugin : jqPageFlow - scrolling pagination made easy
doesn’t seem to work with jquery 1.3.2
Hi Jorge,
Thanks for letting me know.
It was the @ in the jQuery selector causing the problem since 1.3.x did away with xPath selectors. I’ve updated the script accordingly.
Hello there,
I’ve tested your method but it returns lots of reduncies and error (in Firebug and IE debugger) because of the click() function applied on the input element.
After some tests, a big cup of coffee and the help from the jQuery Docs, I’ve found out that this work better:
$(this).children(“input:radio”).attr(“checked”,”checked”);
Hi Arovane, that’s excellent – thanks, will test and amend accordingly