title: Jquery Use Image As CheckBox
body: <p>I am in pursuit of implementing images as checkboxes. For now I am trying out a sample.
  The code below contains a simple image with a submit button next to it. On clicking the submit button I want the image to develop a border around it and on clicking the submit button, I want the checkbox value to be passed. </p>
  
  <pre><code>&lt;html&gt;
  &lt;script&gt;
  $(document).ready(function() {
  
      $('#blr').click(
          function(){
              $('#blr').css('border', 'solid 2px red');
              $('#imgCheck').attr('checked', 'checked');
          },
          function(){
              $('#blr').css('border', 'none');
              $('#imgCheck').removeAttr('checked');
          }
      );
  });
  &lt;/script&gt;
  
  &lt;form id="form1"&gt;
      &lt;img src="icons/blr.jpg" title="blr" id="blr" /&gt;
      &lt;input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" /&gt;
      &lt;input type="submit" value="Submit" /&gt;
  &lt;/form&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am relatively new to Jquery and I am not able to figure out where am I going wrong. Any help will be greatly appreciated.</p>
  
  <p>Thanks in advance :)</p>