У меня есть два флажка с соответствующей меткой, которая имитирует кнопку. Когда я нажимаю на ярлык, он работает, флажок успешно установлен, но мне нужно изменить изображение ярлыка, если флажок установлен или нет. Это работает со второй, но первая кнопка прослушивается и меняет свое изображение только один раз.
Здесь HTML:
<form action="" method="post" class="form-checkboxes">
<input type="checkbox" name="primero" id="primero" class="checkbox" hidden>
<label for="primero" class="label-button">
<img src="img/unchecked.png" width="30px" height="30px" class="img-label">
Primero
</label>
<input type="checkbox" name="segundo" id="segundo" class="checkbox" hidden>
<label for="segundo" class="label-button">
<img src="img/unchecked.png" width="30px" height="30px" class="img-label">
Segundo
</label>
</form>
Код CSS:
.form-checkboxes{
margin-top: 40px;
}
.label-button{
padding: 8px 10px;
margin: 10px;
border: 1px #1f1f1f solid;
border-radius: 3px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif; /*Aquí pon la que quieras xd*/
display: inline-flex;
align-items: center;
}
.label-button:hover{
box-shadow: 1px 1px 8px #808080;
background: #d1ff8b;
transition: all 300ms ease-in-out;
}
.form-checkboxes input[type="checkbox"]:checked + .label-button{
background: #b3ff41;
transition: all 300ms ease-in-out;
box-shadow: 1px 1px 8px #a4ff8d;
border: 2px #9ffa17 solid;
outline-color: #808080;
}
И код Jquery:
$(document).ready(function () {
//Links de las imagenes
const uncheckedLink = 'img/unchecked.png';
const checkedLink = 'img/x.png';
//Labels
var labels = $('.label-button');
//Botones
var checkboxes = $(".checkbox");
labels.each(function (index) {
$(this).click(function () {
//imagen que se usará
var imagenesLabel = $(this).find('img');
//Se determina si el checkbox seleccionado está checked o no
checkboxes.each(function (index) {
if($(this).prop("checked") == true){
imagenesLabel.each(function (index) {
$(this).attr('src', uncheckedLink);
});
} else if($(this).prop("checked") == false){
imagenesLabel.each(function (index) {
$(this).attr('src', checkedLink);
});
}
});
});
});
});