Question

I am using the following code to make a custom checkbox with my own images and it works but it’s using a Checkbox and I need to use Radio buttons.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function(){

$("#moreinfo").change(function() {
   if(this.checked) {
       $(this).prev().attr("src", "checkbox_unchecked.gif");
   } else {
       $(this).prev().attr("src", "checkbox_checked.gif");
   }
});

 });

</script>

Next…here’s the HTML:

<label for="moreinfo">
     <img src="checkbox_unchecked.gif"/>
     <input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>

If it a question of changing from checkbox to radio type or does the jquery need changing too?

How do I go about this?

Answer 1

Change the type="checkbox" to type="radio" (and add some more radio buttons for testing, grouping them via the name attribute, they may not have the same id as IDs are unique!). Then, you also need to handle the click event of the replacement images.
But actually, that’s going beyond your original question, which you could have solved by simply trying it out. 😉