javascript - 错误与 Jquery 单击事件并检查

Question

我有两个复选框，每个复选框都有一个模拟按钮的标签。当我点击它工作的标签时，复选框被成功选中，但如果复选框被选中，我需要更改标签图像。这适用于第二个，但第一个按钮会出现问题，并且只更改一次他的图像。

这里是 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);
                    });
                }
            });
        });
    });
});

Answer 1

将 checkbox 包裹在 label 标签中(这将在点击标签时打开/关闭复选框)并使用 $(this).find('. checkbox').prop("checked") 以查找 checkbox 是 on 还是 off 然后更改图像。

$(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>