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.
For exemple, when you click on the first icon (Blackjack), it will change from this > 
I've tried to do so in JQuery but I think I lack some knowledge. Can you help me fix my script?
JSFiddle: http://ift.tt/1FWKYii
form.php
<style>
input[type=checkbox]{
display: none;
}
</style>
<script src="http://ift.tt/13qgtmt"></script>
</head>
<body>
<form method="post" action="recap.php">
<p>
Cliquez sur les icônes des jeux que vous souhaitez:<br>
<p>
<label for="blackjack"><img src="img/blackjack.jpg" alt=""></label></p>
<INPUT id="blackjack" type="checkbox" value="Blackjack" name="game[]">
<p>
<label for="chuckaluck"><img src="img/chuckaluck.jpg" alt=""></label></p>
<INPUT id="chuckaluck" type="checkbox" value="Chuck a Luck" name="game[]">
<p>
<label for="roulette"><img src="img/roulette.jpg" alt=""></label></p>
<INPUT id="roulette" type="checkbox" value="Roulette" name="game[]">
<p>
<label for="stud"><img src="img/stud.jpg" alt=""></label></p>
<INPUT id="stud" type="checkbox" value="Stud Poker" name="game[]">
<p>
<label for="holdem"><img src="img/holdem.jpg" alt=""></label></p>
<INPUT id="holdem" type="checkbox" value="Holdem Poker" name="game[]">
<p>
<label for="boule"><img src="img/boule.jpg" alt=""></label></p>
<INPUT id="boule" type="checkbox" value="La Boule" name="game[]">
<input type="button" value="Retour en arrière" onClick="self.history.back();">
<input type="submit" name="submit" value="Poursuivre">
</p>
</form>
<script>
$("#blackjack").click( function(){
if( $(this).is(':checked') ) $('#blackjack').attr('src','img/blackjack.gif');
}
});;
});
</script>
Aucun commentaire:
Enregistrer un commentaire