Question

$('input[type="checkbox"]').change(function() {
  var number = [];
  $('input[type="checkbox"]:checked').each(function() {
    number.push($(this).val());
  });
  if (number.length == 0) {
    $('.category1').prop('checked', true);
    loaddata();
  } else if ($('#all').checked && number.length != 8) {
    alert('it executed');
    $('#all').attr('checked', false);
    loaddata();
  } else {
    loaddata();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="expander-list" id="category">
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" id="all" class="category1">all</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="electronics" class="category1">Electronics</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="kitchen" class="category1">Kitchen</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="decoratives" class="category1">Decoratives / Interior</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="homedecor" class="category1">Home Decor</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="furnitures" class="category1">Furnitures</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="toys" class="category1">Toys</label>
    </div>
  </li>
  <li>
    <div class="radio" style="padding-left:0px">
      <label>
        <input type="checkbox" name="filter[]" value="vehicles" class="category1">Vehicles</label>
    </div>
  </li>
</ul>

我的担心很简单。通过单击所有jQuery选择所有复选框，但如果其中一个未选中，则必须取消选中所有复选框。但如果条件没有执行且它没有提醒我，它也不会取消选中所有复选框甚至我的其他复选框。如何解决它并提前感谢。

Answer 1

我就是这样做的：

$('input[type="checkbox"]').change(function() {
  var unchecked_flag = false;

  $('input[type="checkbox"]').slice(1).each(function() {
    if ($(this).prop("checked") == false) {
      unchecked_flag = true;
    }
  });

  if (unchecked_flag) {
    $("#all").prop("checked", false);
  } else {
    $("#all").prop("checked", true);
  }
});

$("#all").click(function() {
  $('input[type="checkbox"]').prop("checked", true);
});

Here is the JSFiddle demo

Answer 2

声明$('#all').checked不会返回您的期望要获得checked属性，您需要$('#all').prop('checked')
注意.prop()和.attr()之间的区别第一个获取当前checked属性，第二个将返回checked属性（在HTML页面中静态定义）。
如果您正在查找复选框的当前状态，请避免使用.attr()。

尝试使用此代码段：

    $('input[type="checkbox"]').change(function() {
       var number = [];
       $('input[type="checkbox"]:checked').each(function() {
          number.push($(this).val());
       });
       if (number.length == 0) {
          $('.category1').prop('checked', true);
          loaddata();
       } else if ($('#all').prop('checked') && number.length !== 8) {
          alert('it executed');
          $('#all').prop('checked', false);
          loaddata();
       } else {
          loaddata();
       }
    });

另见jQuery docs

Answer 3

您好根据您的要求，我认为以下小提琴将解决您的问题尝试这希望它可以帮助您。

我为所有＆＃34;所有＆＃34;做了和＆＃34;单身＆＃34;你的帮助的复选框。你可以随意选择任务..

**你的jquery就像下面的那样..

$(function(){
    var f=$('#foo')
    f.load(function(){ 
        f.contents().find('#DivID).hide();
    });
});

尝试以下小提琴

Checkbox select Fiddle Demo

jQuery不取消选中复选框

3 个答案: