JQuery Custom Image Checkbox code not toggling
<p>I am using the following code to make a custom checkbox with my own images.</p>

<p>First I included JQuery and added the JQuery code for the required functionality:</p>

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

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

 });

&lt;/script&gt;


Next...here's the HTML:



 &lt;label for="moreinfo"&gt;
    &lt;img src="checkbox_unchecked.gif"/&gt;
    &lt;input name="moreinfo" type="checkbox" id="moreinfo" style="display:none"&gt;
    &lt;/label&gt;
</code></pre>

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

<p>I'm I missing something?</p>

<p>UPDATE:</p>

<p>Testing this full code locally and it's not working...</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script&gt;
 $(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");
   }
});


 });

&lt;/script&gt;

&lt;/title&gt;




&lt;/head&gt;
&lt;body&gt;



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




&lt;/body&gt;
&lt;/html&gt;
</code></pre>
