Question

I am using JQuery and custom images for custom radio buttons. Right now, it would work as a checkbox. I need it to work as a radio.

When I click on either of both radio’s both will get ticked instead of one at a time. Am I missing something?

HTML:

<label for="radio1">
    <img src="radio_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio1" style="display:none;">
</label>

<label for="radio2">
    <img src="radio_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio2" style="display:none;">
</label>

JavaScript:

$(document).ready(function() {

    $("#radio1").change(function() {
        if (this.checked) {
            $(this).prev().attr("src", "radio_checked.png");
        } else {
            $(this).prev().attr("src", "radio_unchecked.png");
        }
    });


    $("#radio2").change(function() {
        if (this.checked) {
            $(this).prev().attr("src", "radio_checked.png");
        } else {
            $(this).prev().attr("src", "radio_unchecked.png");
        }
    });

});

Answer 1

The radio buttons are working correctly (proof), but your logic for updating the images is incorrect. Both images have to change when either radio button is clicked, since both values change (and the change handler is only fired on the one that you clicked). Have a single change handler used by both radio buttons, and set both images on every change, e.g.:

$('#radio1, #radio2').change(function() {
  var r;

  r = $("#radio1");
  r.prev().attr("src", r[0].checked ? checkedImage : uncheckedImage);
  r = $("#radio2");
  r.prev().attr("src", r[0].checked ? checkedImage : uncheckedImage);

});

Live example

---

Side note: If your target browsers support the :checked pseudo-class (IE only has this as of IE9, not in IE8 or earlier) and adjacent sibling combinator from CSS3, you can do this entirely with CSS:

HTML:

<input type="radio" name="radiogroup" id="radio1" style="display: none">
<label for="radio1"></label>
<input type="radio" name="radiogroup" id="radio2" style="display: none">
<label for="radio2"></label>

CSS:

#radio1 + label, #radio2 + label {
    display: inline-block;
    background-image: url(radio_unchecked.png);
    width: 32px;  /* Whatever matches the images */
    height: 32px; /* Whatever matches the images */
}
#radio1:checked + label, #radio2:checked + label {
    background-image: url(radio_checked.png);
}

Live example

Or alternately (it’s just the selectors that are different):

input[name="radiogroup"] + label {
    display: inline-block;
    background-image: url(radio_unchecked.png);
    width: 32px;  /* Whatever matches the images */
    height: 32px; /* Whatever matches the images */
}
input[name="radiogroup"]:checked + label {
    background-image: url(radio_checked.png);
}