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');
    }
});