jQuery Check and Uncheck all doesn't work

Question

I have a list of checkboxes that I want to select and unselect.

The problem currently is that when I click All, all items in the list are added to an array called filter. However when I click All again, the list is repopulated with the items again. It is supposed to empty the filter array and uncheck all checkboxes.

How can I uncheck all the boxes if I select the All checkbox again?

The list consist of:

if(!empty($items)){ ?>
    <input class="form-check-input select-item" data-item="All" type="checkbox" value="All" id="All">
    <label class="form-check-label item-label" for="All">All </label>
    <?php foreach ($items as $entry): ?>
        <input class="form-check-input select-item" data-item="<?php echo $entry['short_name'];?>" type="checkbox" value="<?php echo $entry['short_name'];?>" id="<?php echo $entry['short_name'];?>">
        <label class="form-check-label item-label" for="<?php echo $entry['short_name'];?>"><?php echo $entry['full_name'];?> </label>
    <?php endforeach; ?>
<?php } ?>

This is the JavaScript I have at the moment:

$(".select-item").click(function(e){
    var item = $(this).data('item');
    if(item=="All") {
        console.log($('#items input:checkbox').length);
        if(filterAllChecked()) {
            console.log("in");
            $('#items input:checkbox').prop('checked',"");
            filter = [];
        } else {
            $('#items input:checkbox').prop('checked', 'checked');
            var items = $("#items input:checkbox:checked").map(function(){
                return $(this).val();
            }).get();
            filter = items;
            console.log($('#items input:checkbox').filter(":checked").length);
            }
        } else {
            var index = $.inArray(item,filter);
            if(this.checked && index === -1) {
                filter.push(item);
            } else {
                filter.splice(index,1);
            }
        }
    console.log(filter);
});

This is the check to see if all items have been selected:

function filterAllChecked(){
    var checkboxes = $("#items input:checkbox");
    return checkboxes.length === checkboxes.filter(":checked").length;
}

Answer 1

You should create a separate function getChecked() to get new values.

See Example:

function getChecked() {
	var filter = [];
	$('input:checkbox').not($('#All')).each(function(){
  	if ($(this).is(':checked')) {
  	    filter.push($(this).val());
    }
  })
  console.log(filter);
}

$('input:checkbox').not($('#All')).on('click', function(){
	if (!$(this).is(':checked')) { $('#All').prop('checked', false); }
	getChecked();
})

$('#All').on('click', function(){
	($(this).is(':checked')) ? $('input:checkbox').not($(this)).prop('checked', true) :  $('input:checkbox').not($(this)).prop('checked', false);
    getChecked();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-check-input select-item" data-item="All" type="checkbox" value="All" id="All"> Check All <br>
<input type="checkbox" name="name1" value="name1"> Name 1
<input type="checkbox" name="name2" value="name2"> Name 2
<input type="checkbox" name="name3" value="name3"> Name 3

Answer 2

try this

$(".select-item").click(function(){  
    if($(this).attr('data-item') == 'All'){
        if($(this).hasClass('select-item-checked')){
            $(this).removeClass('select-item-checked');
            $('.select-item').not('[data-item="All"]').prop('checked', false);
        }else{
            $('.select-item').not('[data-item="All"]').prop('checked', true);           
            $(this).addClass('select-item-checked');
        }
    }       
    var filter = $.makeArray($('.select-item:checked').not('[data-item="All"]').map(function(k,v){return $(v).val();}));
    console.log(filter);
});

demo : https://jsfiddle.net/mo9khobg/5/

Answer 3

If you want have control of the array you can do it this way:

var inputArray = []
$('input').on('click', function(event){
console.log(event.target.checked)
  modifyArray(event.target)
})

$('#selectAll').on('click', function(el){
$('.input').each(function(index, el){
console.log(el)
el.checked = !el.checked
modifyArray(el)
  })
});

function modifyArray(el) {
console.log(el.checked)
    if(el.checked){
     if(inputArray.indexOf(el.name) === -1){
            inputArray.push(el.name)    
    }
}else{
    let index = inputArray.indexOf(el.name)
  console.log(index)
  inputArray.splice(index, 1)
}
console.log(inputArray)
}

Jsfiddle here: https://jsfiddle.net/L2pacjp5/29/