title: image checkbox form with jquery
body: <p>I would like to make a checkbox form that has mouse over image and checked image function with jquery.</p>
  
  <p>I successfully made the function but didn't work good enough.</p>
  
  <p>here is my html form.</p>
  
  <pre><code>&lt;label for="w_interest"&gt;
      &lt;img src="/images/account/w_select.png_img"/ style='cursor:pointer;'&gt;
      &lt;input name="w_interest" type="checkbox" id="w_interest" style="display:none"&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>here is jquery </p>
  
  <pre><code>$(document).ready(function () {
    $('#img').hover(
       function () {
           $(this).attr('src', '/images/account/ws_145_hover.png');
        },
       function () {
           $(this).attr('src', '/images/account/ws_145.png');
        }
    );
  
    $("#img").click(function() {
       if(1) {
           $(this).attr("src", "/images/account/ws_145_checked.png");
           $("#w_interest").val("0");
       } else {
           $(this).attr("src", "/images/account/ws_145.png");
           $("#w_interest").val("1");
       }
    });
  });
  </code></pre>
  
  <ol>
  <li><p>It changes to checked image when I click the image. However, when I move the mouse out, it change to the original image. I wanna make sure that it stays to checked image.</p></li>
  <li><p>I would like to make sure that it checks the checkbox input.</p></li>
  <li><p>If a user click the checked image again, it deselects checkbox input.</p></li>
  </ol>
  
  <p>Can you help me to fix jquery to make this happen?</p>