title: Change checkbox image when checked
body: <p>I have a basic form with images instead of checkboxes (but act as if).
  In order to be more consistent, I want the image to be changed when a user clicks it.</p>
  
  <p>For exemple, when you click on the first icon (Blackjack), it will change from this > <img src="https://i.stack.imgur.com/5y7pI.jpg" alt="enter image description here"> to this > <img src="https://i.stack.imgur.com/J6dkP.gif" alt="enter image description here"></p>
  
  <p>I've tried to do so in JQuery but I think I lack some knowledge. Can you help me fix my script?</p>
  
  <p><strong>JSFiddle</strong>: <a href="http://jsfiddle.net/x0baboc6/" rel="nofollow noreferrer">http://jsfiddle.net/x0baboc6/</a></p>
  
  <p><strong>form.php</strong></p>
  
  <pre><code>&lt;style&gt;
  input[type=checkbox]{
    display: none;
  }
  &lt;/style&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form method="post" action="recap.php"&gt;
    &lt;p&gt;
      Cliquez sur les icônes des jeux que vous souhaitez:&lt;br&gt;
      &lt;p&gt;
  
        &lt;label for="blackjack"&gt;&lt;img src="img/blackjack.jpg" alt=""&gt;&lt;/label&gt;&lt;/p&gt;
        &lt;INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]"&gt;    
  
  &lt;p&gt;
        &lt;label for="chuckaluck"&gt;&lt;img src="img/chuckaluck.jpg" alt=""&gt;&lt;/label&gt;&lt;/p&gt;
        &lt;INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]"&gt;
  
  &lt;p&gt;
        &lt;label for="roulette"&gt;&lt;img src="img/roulette.jpg" alt=""&gt;&lt;/label&gt;&lt;/p&gt;
        &lt;INPUT id="roulette" type="checkbox" value="Roulette" name="game[]"&gt;
  
  &lt;p&gt;
        &lt;label for="stud"&gt;&lt;img src="img/stud.jpg" alt=""&gt;&lt;/label&gt;&lt;/p&gt;
        &lt;INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]"&gt;
  
  &lt;p&gt;
        &lt;label for="holdem"&gt;&lt;img src="img/holdem.jpg" alt=""&gt;&lt;/label&gt;&lt;/p&gt;
        &lt;INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]"&gt;
  
  &lt;p&gt;
        &lt;label for="boule"&gt;&lt;img src="img/boule.jpg" alt=""&gt;&lt;/label&gt;&lt;/p&gt; 
        &lt;INPUT id="boule" type="checkbox" value="La Boule" name="game[]"&gt;
  
      &lt;input type="button" value="Retour en arrière" onClick="self.history.back();"&gt;
      &lt;input type="submit" name="submit" value="Poursuivre"&gt;
  &lt;/p&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  $("#blackjack").click( function(){
     if( $(this).is(':checked') ) $('#blackjack').attr('src','img/blackjack.gif');
      }
  });;
  });
  &lt;/script&gt;
  </code></pre>