I've been attempting to make this work, but it's not functioning correctly.
Below is the CSS code:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #000000;
}
#carte label {
display: inline-block;
cursor: pointer;
}
#carte label img {
padding: 3px;
}
The HTML section looks like this:
<div id="carte">
Select a card:<br>
<input type=radio name="carte" id="cart1" class='input_hidden' />
<label for="cart1">
<img src="cart1.jpg" alt="card1" />
</label>
<input type=radio name="carte" id="cart2" class='input_hidden' />
<label for="cart2">
<img src="cart2.jpg" alt="card2" />
</label>
<input type=radio name="carte" id="cart3" class='input_hidden' />
<label for="cart3">
<img src="cart3.jpg" alt="card3" />
</label>
</div>
Lastly, the JavaScript snippet is as follows:
$('#carte label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
While applying the selected class works on an image, the part of the script that should be assigning the class seems to be ineffective. Are there any alternative methods for managing classes with these images? Your assistance is greatly appreciated.