jQuery Check and Uncheck all不起作用

Question

我有要選擇和取消選擇的復選框列表。

當前的問題是，當我單擊“全部”時，列表中的所有項目都被添加到稱為過濾器的數組中。 但是，當我再次單擊“全部”時，列表將再次被重新填充項目。 應該清空過濾器數組並取消選中所有復選框。

如果再次選擇全部復選框，如何取消所有復選框？

該列表包括：

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

這是我目前擁有的JavaScript：

$(".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);
});

這是檢查是否已選擇所有項目的檢查：

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

Answer 1

嘗試這個

$(".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);
});

演示： https : //jsfiddle.net/mo9khobg/5/

Answer 2

如果要控制數組，可以按以下方式進行：

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此處： https ：//jsfiddle.net/L2pacjp5/29/

Answer 3

您應該創建一個單獨的函數 getChecked（）以獲取新值。

參見示例：

 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