Question

I know normally that assigning a name attribute to the radio inputs would only allow for one to be checked at a time, but I am restyling my inputs with jQuery and that will no longer work. I’m not efficient enough in jQuery yet to understand how to overcome this problem.

HTML

​<input type="radio" class="radio" name="one" />
<input type="radio" class="radio" name="one" />​​​​​​​

jQuery

$('.radio').each(function() {
    $(this).hide();

    var $image = $("<img class='checkbox' src='assets/images/layout/checkbox/unchecked.png' />").insertAfter(this);

    $image.click(function() {
        var $checkbox = $(this).prev('.radio');
        $checkbox.prop('checked', !$checkbox.prop('checked'));

        if($checkbox.prop("checked")) {
            $image.attr("src", "assets/images/layout/checkbox/checked.png");
        } else {
            $image.attr("src", "assets/images/layout/checkbox/unchecked.png");
        }
    });
});

I figured that I need to alter my conditional statement to target whether or not the inputs with a specific name (‘1’ for the example) are checked, prior to changing the image. All of my attempts failed, unfortunately.

Answer 1

For each radio button, get it’s name attribute. Then, on the checkbox image click, get all the radio button elements that have that name and uncheck them, before applying the checked value to the one that was clicked.

Example using your jsFiddle