JQuery Custom Image Checkbox code not toggling

Question

I am using the following code to make a custom checkbox with my own images.

First I included JQuery and added the JQuery code for the required functionality:

<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>

The unchecked image is there but when I click on it, it doesn't change/toggle.

I'm I missing something?

UPDATE:

Testing this full code locally and it's not working...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>

<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", "http://icdn.pro/images/en/v/e/verify-correct-icone-9268-48.png");
   } else {
       $(this).prev().attr("src", "http://www.theology.edu/Remata/Android/Help/wrongx_icon.png");
   }
});


 });

</script>

</title>




</head>
<body>



<label for="moreinfo">
    <img src="http://www.theology.edu/Remata/Android/Help/wrongx_icon.png"/>
    <input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
    </label>




</body>
</html>

Okan Kocyigit · Accepted Answer · 2012-01-10 22:48:39Z

1

It's working, you can check it here.

answered Jan 10, 2012 at 22:48

Okan Kocyigit

13.5k18 gold badges74 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Satch3000 Over a year ago

I agree it's working there but see the full code above which I'm testing. Try it...it won't work for some reason :o/

Okan Kocyigit Over a year ago

It's not working because you wrote script codes into title tags.

Frenchi In LA · Accepted Answer · 2012-01-10 22:47:06Z

0

      $("#moreinfo").click(function() {
       var $img =  $(this).prev();
$img.attr("src", ($(this).checked)?"checkbox_checked.gif":"checkbox_unchecked.gif");

    });

answered Jan 10, 2012 at 22:47

Frenchi In LA

3,1694 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

JQuery Custom Image Checkbox code not toggling

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related