Кнопки переключения кастомных чекбоксов

Рейтинг: 0Ответов: 1Опубликовано: 18.01.2023

Есть несколько кастомных чекбоксов и кнопки изменения их значения. Одна устанавливает все чекбоксы в положение true, другая - в положение false. Они работают, но только до тех пор пока не изменить положение одного из чекбоксов вручную. После этого он никак не реагирует ни на одну из кнопок. Как можно это починить?

let checkAll = document.querySelector(' input[type="button"]'),
    checkboxes = document.querySelectorAll('.subscribtions-list input'),
    unsubscribe = document.querySelector('.account-unsubscribe');

// checkboxes.forEach((item)=>{
//     item.setAttribute('checked', '');
// });

checkAll.addEventListener('click', ()=>{
    checkboxes.forEach((item)=>{
        let checked = item.hasAttribute('checked');
        if(!checked){
            item.setAttribute('checked', '');
            // item.classList.add('active');
        }
    });
});

unsubscribe.addEventListener('click', ()=>{
    checkboxes.forEach((item)=>{
        let checked = item.hasAttribute('checked');
        if(checked){
        item.removeAttribute('checked', '');
        // item.classList.remove('active');
        }
    });
});
label.subscribe-name {
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    margin-top: 15px;
    margin-bottom: 8px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

label.subscribe-name:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    border: 2px solid #666666;
    border-radius: 3px;
}

.subscribtions-list input[type="checkbox"] {
    appearance: none;
    position: absolute;
}

.subscribtions-list input:checked + .subscribe-name::after{
    background-color: #7CC142
}

.subscribe-form input[type="button"] {
    background: #7CC142;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    padding: 14px 30px;
    border: none;
    margin-left: auto;
    display: block;
    cursor: pointer;
}

span.account-unsubscribe {
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #8D8D8D;
    border-bottom: 2px solid #7CC142;
    /* text-align: end; */
    display: block;
    margin-left: auto;
    width: fit-content;
    cursor: pointer;
}
<input type="button" value="SUBSCRIBE TO ALL">
<div class="subscribtions">
  <ul class="subscribtions-list">
    <li>
      <input id="recipes" type="checkbox">
      <label for="recipes" class="subscribe-name active">New Recipes</label>
    </li>
    <li>
      <input id="gluten" type="checkbox">
      <label for="gluten" class="subscribe-name">Gluten Free Recipes</label>
    </li>
    <li>
      <input id="healthy" type="checkbox">
      <label for="healthy" class="subscribe-name">Heart Healthy Recipes</label>
    </li>
    <li>
      <input id="kids" type="checkbox">
      <label for="kids" class="subscribe-name">Healthy Kids Recipes</label>
    </li>
  </ul>
  <span class="account-unsubscribe">Unsubscribe from all</span>
</div>

javascript checkbox
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Если Вам нужно выделить или снять выделение со всех чекбоксов, то нет необходимости каждый из них проверять в отдельности на true/false. При проверке и не срабатывает Ваше условие. Можно проще сделать:

 checkAll.addEventListener('click', ()=>{
        checkboxes.forEach((item)=>{
            item.checked = true;
        });
    });
    

    unsubscribe.addEventListener('click', ()=>{
        checkboxes.forEach((item)=>{
           item.checked = false;
        });
    });