How to mark the background to black of the div when the radio is in checked , and only one div can be black at the same time JQuery.
The problem I have now is that the div are marked with black color, but when I mark one when marking the next, the first one does not return to the initial color but remains marked with black color.
Here is the code.
Simply when you make a on('change') you have to return all the boxes to their original state and when selected, give them the styles you want to give them.
I add: you can also create classes like "radioSelected" and you can have the code even cleaner and more "readable"
CSS:
.box.selected {
background-color: #000;
}
.box.selected p {
color: #fff;
}
Jquery:
$input.each(function() {
if ($(this).prop("checked")) {
$(this).parent(".box").addClass("selected");
}
});
$input.on('change', function() {
if ($(this).prop("checked")) {
$input.each(function() {
$(this).parent(".box").removeClass("selected");
});
$(this).parent(".box").addClass("selected");
}
});