radio box checked on click

Question

I am trying to check the radio box onClick using jQuery, my code is below:

<ul class="icons clearfix">
    <li>
        <input type="radio" value="123456" name="selecticon"/>
        <label for="select_icon">
            <img src="pics/123456.jpg" alt="123456" width="34" height="34" />
        </label>
    </li>
    <li>
        <input type="radio" value="654321" name="selecticon" />
        <label for="select_icon">
            <img src="pics/654321.jpg" alt="654321" width="34" height="34" />
        </label>
    </li>
</ul>

and jQuery code...

//onclick select icon
$(document).ready(function(){
    $('ul.icons li').click(function() {
    $('ul.icons li.selected').removeClass('selected');
    $(this).addClass('selected').children("input[@type=radio]").attr('checked');
   });
});

But on click its not checking radio button, please suggest, thanks.

Answer 1

Change:

.attr('checked')

To:

.prop('checked', true)

You could also use .attr('checked', 'checked'), but it's suggested to use prop() for boolean attributes like checked.

You also need quotes around the attribute value here:

.children('input[@type="radio"]')

Demo: http://jsfiddle.net/pUqBB/

Additionally (not related), The for attribute of a <label> must match the associated input's id rather than the name.

Most importantly:

You don't need javascript for this at all if you simply wrap the whole thing in a <label>

Demo: http://jsfiddle.net/pUqBB/1/

See also: How can I make an HTML radiobutton with a big target area?

---

EDIT: OK, not sure if you're interested but I rewrote this with the accessible version using <label>, and js only to add/remove the selected class (since we do need javascript for that bit). I'm using this code in production on all my sites, feel free to use it (or point out improvements):

http://jsfiddle.net/pUqBB/2/

// Add class="selected" to the parent element of checked inputs

// on page load
$("input:checked").parent().addClass('selected');

$(":radio").live('change', function () {
   if ($(this).prop('checked')) {
        $(':radio[name="' + $(this).attr('name') + '"]').parent().removeClass('selected');
        $(this).parent().addClass('selected');
    }
});

$(":checkbox").live('change', function () {
    if ($(this).prop('checked')) {
        $(this).parent().addClass('selected');
    } else {
        $(this).parent().removeClass('selected');
    }
});

Answer 2

The problem is on this line:

$(this).addClass('selected').children("input[@type=radio]").attr('checked');

First, you should quote your attribute selectors, and you don't need the @ anymore.

.children("input[type='radio']")

Second .attr('checked') is a getter, it returns you the value of the attribute. If you want to set it, you need to pass the value as the 2nd parameter.

.attr('checked', 'checked')

You can also use .prop which lets you use booleans instead of 'checked'.

.prop('checked', true)

So, all together it should be:

$(this).addClass('selected').children("input[type='radio']").prop('checked', true);

Note: <label> tags are used to select input fields by their ID. So, you can use them to toggle the radios. Also, if radios have the same name, only one can be checked at a time. So, add unique IDs to your radios, and set their labels for attributes to them. Like so:

<input type="radio" value="123456" name="selecticon" id="selecticon_01"/>
<label for="selecticon_01">
    <img src="pics/123456.jpg" alt="123456" width="34" height="34" />
</label>

So, then you just need $(this).addClass('selected').

Demo: http://jsfiddle.net/wQS46/

Answer 3

.children is not working. .find should work.

<ul class="category-checklist form-no-clear">
    <li>
        <label>
            <input type="radio" name="post_category" value="1" class="post-category">
            <span class="tag-name">Uncategorised</span>
        </label>
    </li>
    <li>
        <label>
            <input type="radio" name="post_category" value="2" class="post-category">
            <span class="tag-name">Basic Statistics</span>
       </label>
    </li>
    <li>
        <label>
            <input type="radio" name="post_category" value="3" class="post-category">
            <span class="tag-name">Advanced Statistics</span>
        </label>
    </li>
</ul>`

$('.category-checklist li').click(function() {
    $('.category-checklist li').removeClass('selected');
    $(this).addClass('selected').find("input[type='radio']").prop('checked', true);
 });

Answer 4

$(this).addClass('selected').children("input[@type=radio]").attr('checked', 'checked');

Working fiddle is added.