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