mercredi 6 mars 2019

jQuery add :checked to a class

I am using a different checkbox styling that uses the toggle:after psuedo/class, and then it gets checked, it becomes toggle:checked:after

When I directly click on the input, it works fine. But since I am also using a 'Select All' option, once I've manually changed the state of the checkbox, the 'Select All/Deselect all' ignores the :after.

This is how my code looks like

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

});

My checkboxes look like this

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

What I think, is that somehow the :checkbox psuedo is not added to the '.toggle' class when I am clicking in Select All.

How can I add the :psuedo to '.toggle' here? The checkbox itself doest get checked="checked", so the checkbox does get checked, it's only not visually visible.

Thanks!




Aucun commentaire:

Enregistrer un commentaire