jQuery Uniform Checkbox Select/Deselect All Issue

I am trying to figure out how to convert this piece of code:

var checkboxes = document.querySelectorAll(‘input.thing’),
checkall = document.getElementById(‘checkall’);

for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].onclick = function() {
var checkedCount = document.querySelectorAll(‘input.thing:checked’).length;

checkall.checked = checkedCount > 0;
checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}

checkall.onclick = function() {
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
}

To work but not for inputs but for spans as I am using the uniform.js plugin which wraps my inputs in spans and divs so I cannot simply use the :checked attribute, it’s an actual class.

Here is my current attempt:

$(“.fep-cb-check-uncheck-all”).mousedown(function () {
$(‘.checker > span’).each(function() {
if($(this).hasClass(‘checked’)) {
$(this).removeClass(‘checked’);
} else {
$(this).addClass(‘checked’);
}
});
});

which works fine but the only problem is that if there is one checkbox already clicked and I press the select all button, all of the other checkboxes get ticked and the one checkbox that was already ticked gets unticked which I don’t want, I would like it to recognise that that one checkbox is already ticked and ignore it and just add the checked class to the other checkboxes that haven’t been clicked. I was thinking that maybe localstorage get and set items might do the trick but I’m not sure. I hope I’ve made this clear enough to understand. Thanks in advance

Read more here:: jQuery Uniform Checkbox Select/Deselect All Issue

Leave a Reply

Your email address will not be published. Required fields are marked *