Question

“全选”工作正常，但是问题是当我取消选中所有“项目”，然后“全选”仍显示为选中状态时，如果所有“项目”均未选中，则应该取消选中。

$("#checkAll").click(function() {
  $('input:checkbox').not(this).prop('checked', this.checked);
  $(".global-download-bar").toggle();
});

body {
  position: relative;
  height: 300px;
}

.global-download-bar {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  background: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">SELECT ALL
<hr />
<input type="checkbox" id="checkItem">Item 1
<input type="checkbox" id="checkItem">Item 2
<input type="checkbox" id="checkItem">Item3

<div class="global-download-bar"></div>

Answer 1

您应该听change元素的checkItem事件。如果:checked复选框的数量与总元素的数量相同，则表示需要。

由于标识符在HTML中必须唯一，因此请使用通用类来定位checkItem复选框。

var childCheckboxes = $('.checkItem');

childCheckboxes.on('change', function() {
  var allChildCheckboxesChecked = childCheckboxes.length == childCheckboxes.filter(':checked').length;
  $('#checkAll').prop('checked', allChildCheckboxesChecked);

  //Maybe
  if (allChildCheckboxesChecked) {
    $(".global-download-bar").toggle();
  }
});

$("#checkAll").change(function() {
  childCheckboxes.prop('checked', this.checked);
  $(".global-download-bar").toggle();
});

body {
  position: relative;
  height: 300px;
}

.global-download-bar {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  background: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">SELECT ALL
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

<div class="global-download-bar"></div>

Answer 2

我认为这是一种更清洁的解决方案。

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

$('.checkItem, #checkAll').on('change', function() {
    if($('.checkItem').length == $('.checkItem:checked').length) {
      $("#checkAll").prop('checked', true);
      $(".global-download-bar").show();
    } else {
      $("#checkAll").prop('checked', false);
      $(".global-download-bar").hide();
    }
});

body {
  position: relative;
  height: 300px;
}

.global-download-bar {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  background: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">SELECT ALL
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

<div class="global-download-bar"></div>

Answer 3

$('#checkAll').on('click', function() {
    if($('#checkAll').is(':checked')) {
        $('input[type="checkbox"]').not($(this)).prop('checked', true);
    } else {
        $('input[type="checkbox"]').not($(this)).prop('checked', false);
    }
});

$('input.checkItem').on('click', function() {
    let state = false;
    const checkboxes = $('.checkItem');
    state = Array.prototype.every.call(checkboxes, (ele) => {
        return $(ele).is(':checked');
    });

    if(state) {
        $("input#checkAll").prop('checked', state);
    } else {
        $("input#checkAll").prop('checked', state);
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">SELECT ALL
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

<div class="global-download-bar"></div>

Answer 4

听起来像您需要向checkItem添加处理程序-如果单击时未选中任何处理程序，请取消选中checkAll并隐藏global-download-bar。

请注意，单个文档中的重复ID是无效的HTML -最好使用类。

const $checkAll = $("#checkAll");
$checkAll.click(function() {
  const { checked } = this;
  $('.checkItem').prop('checked', this.checked);
  if (checked) $(".global-download-bar").show();
  else $(".global-download-bar").hide();
});
$('.checkItem').click(function() {
  if ($('.checkItem:checked').length === 0) {
    $checkAll.prop('checked', false);
    $(".global-download-bar").hide();
  }
})

body {
  position: relative;
  height: 300px;
}

.global-download-bar {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  background: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">SELECT ALL
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

<div class="global-download-bar"></div>

未选中复选框时，取消选中“全选”

4 个答案: