JQuery добавить: проверено в классе

Question

Я использую другой стиль чекбокса, который использует переключатель: после psuedo / class, а затем он проверяется, он становится переключателем: флажок: после

Когда я непосредственно нажимаю на вход, он работает нормально. Но поскольку я также использую опцию «Выбрать все», после того, как я вручную изменил состояние флажка, «Выбрать все / Отменить все» игнорирует: after.

Вот так выглядит мой код

$('#selectAllFeeds').on('click',function(){
    if (allFeedsSelected == 0) {

        $('.rss-feed-checkboxes:visible').each(function(){
            $(this).attr('checked',true);
            $('#selectAllFeeds').html('Deselect all');
        });

        allFeedsSelected = 1;
        syncCheckboxes();

    } else if (allFeedsSelected == 1) {

        $('.rss-feed-checkboxes:visible').each(function(){
            $(this).attr('checked',false);
            $('#selectAllFeeds').html('Select all');       
        });

        allFeedsSelected = 0;
        syncCheckboxes();

    }
    countCheckboxes();

});

Мои флажки выглядят так

<input type="checkbox" id="Arabian Business" class="rss-feed-checkboxes toggle">

CSS:

.rss-feeds-overview .toggle:checked:after {
    background: #d20a11;
    left: 40px;
}
.rss-feeds-overview .toggle:after {
    content: "";
    background: #999;
    display: block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    position: absolute;
    left: 0px;
    transform: scale(2);
    cursor: pointer;
    transition: all 0.4s ease;
}
.rss-feeds-overview .toggle:checked {
    background-color: #dc9490;
}

Что я думаю, так это то, что флажок: psuedo не добавляется в класс '.toggle', когда я нажимаю на Выбрать все.

Как я могу добавить: psuedo в '.toggle' здесь? Сам флажок должен быть проверен = "проверен", поэтому флажок проверяется, он только визуально не виден.

Спасибо!

Answer 1

пример кода с некоторыми изменениями для тестирования

<input type="checkbox" id="Arabian Business" class="rss-feed-checkboxes toggle">
<button id="selectAllFeeds">btn</button>


$('#selectAllFeeds').on('click',function(){
var allFeedsSelected = $(".toggle").is(":checked") ? 1 : 0 ;
console.log(allFeedsSelected);
    if (allFeedsSelected == 0) {

        $('.rss-feed-checkboxes:visible').each(function(){
            $(this).prop("checked",true);
            $('#selectAllFeeds').html('Deselect all');
        });

        allFeedsSelected = 1;
        //syncCheckboxes();

    } else if (allFeedsSelected == 1) {

        $('.rss-feed-checkboxes:visible').each(function(){
            $(this).prop("checked",false);
            $('#selectAllFeeds').html('Select all');       
        });

        allFeedsSelected = 0;
        //syncCheckboxes();

    }
   // countCheckboxes();

});