Question

我有一个我想要选择和取消选中的复选框列表。

目前的问题是，当我单击All时，列表中的所有项目都会添加到名为filter的数组中。但是，当我再次单击“全部”时，将再次使用这些项重新填充列表。它应该清空过滤器数组并取消选中所有复选框。

如果再次选中全部复选框，如何取消选中所有框？

该清单包括：

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

这是我目前的JavaScript：

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

检查是否已选择所有项目：

var current_division,
    desired_division;

    
    
function current1() {
  var Amt = document.priceCalc.CRANK1;
  var Qty = document.priceCalc.CRANK2;
  return parseInt(Qty.value) * parseFloat(Amt.value);
}

function desiredd() {
  var Amt = document.priceCalc.DRANK1;
  var Qty = document.priceCalc.DRANK2;
  return price = parseInt(Qty.value) * parseFloat(Amt.value);

}

function total() {
  if (isNaN(current1())) {
    current_division = 0;
  } else {
    current_division = current1();
  }

  if (isNaN(desiredd())) {
    desired_division = 0;
  } else {
    desired_division = desiredd();
  }

  var totalPrice = (current_division + desired_division);

  document.getElementById('prices').value = totalPrice;
  document.getElementById("prices").readOnly = true;


}

document.getElementById('divboost').addEventListener('change', function() {
  total();
})

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（）来获取新值。

参见示例：

＆＃13;

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

＆＃13;

<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

＆＃13;

jQuery检查并取消选中所有不起作用

3 个答案: