Bug with Jquery click event and checked

Question

I have two checkboxes with a respective label that simulates a button. When I click the label it works, the checkbox is checked succesfully, but I need to change the label image if the checkbox is checked or not. That works with the second, but the first button gets bugged and only change his image once.

Here the 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 Code:

.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;
}

And the Jquery code:

$(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);
                    });
                }
            });
        });
    });
});

Answer 1

Use change event when you check/uncheck checkboxes.. Here is working Code...

$(document).ready(function () {
  const uncheckedLink = 'http://pluspng.com/img-png/png-wrong-cross-cancel-cross-exit-no-not-allowed-stop-wrong-icon-icon-512.png';
  const checkedLink = 'https://img.pngio.com/check-mark-clip-art-check-vector-png-download-540599-free-check-png-900_600.jpg';

  $('.checkbox').on('change', function(){

    if($(this).is(":checked")){
      $(this).next('label').find('img').attr('src', checkedLink);
    }
    else{
      $(this).next('label').find('img').attr('src', uncheckedLink);
    }
  })

});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="http://pluspng.com/img-png/png-wrong-cross-cancel-cross-exit-no-not-allowed-stop-wrong-icon-icon-512.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="http://pluspng.com/img-png/png-wrong-cross-cancel-cross-exit-no-not-allowed-stop-wrong-icon-icon-512.png" width="30px" height="30px" class="img-label">
        Segundo
    </label>
</form>

Answer 2

Wrap the checkbox within a label tag(this will on/off checkbox when click on label) and use $(this).find('.checkbox').prop("checked") to find whether checkbox is on or off then change the image.

$(document).ready(function () {
    const uncheckedLink = 'https://media.giphy.com/media/5NPhdqmyRxn8I/giphy.gif';
    const checkedLink = 'https://ssl.gstatic.com/images/branding/googleg/2x/googleg_standard_color_64dp.png';
    $('.label-button').click(function () {
      if($(this).find('.checkbox').prop("checked")){
           $(this).find("img").attr('src', uncheckedLink);
         } else { 
           $(this).find("img").attr('src', checkedLink);
        }
    });
});

.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;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<form action="" method="post" class="form-checkboxes">
    <label for="primero" class="label-button">
        <input type="checkbox" name="primero" id="primero" class="checkbox" hidden>
        <img src="https://ssl.gstatic.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" width="30px" height="30px" class="img-label">
        Primero
    </label>
    <label for="segundo" class="label-button">
        <input type="checkbox" name="segundo" id="segundo" class="checkbox" hidden>
        <img src="https://ssl.gstatic.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" width="30px" height="30px" class="img-label">
        Segundo
    </label>
</form>