Question

HTML code：

<a href="http://branch.io/something" mc:disable-tracking>Disabled Mandrill URL</a>

jQuery代码：

    <ul class="expander-list" id="category">
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" id="all" name="filter"  class="checkbox0" value="all">
            all </label>
        </div>
      </li>
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" name="filter"  class="checkbox1" value="electronics">
            Electronics </label>
        </div>
      </li>
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" name="filter"  class="checkbox1" value="kitchen">
            Kitchen </label>
        </div>
      </li>
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" name="filter"  class="checkbox1" value="decoratives">
            Decoratives / Interior </label>
        </div>
      </li>
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" name="filter"  class="checkbox1" value="homedecor">
            Home Decor </label>
        </div>
      </li>
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" name="filter"  class="checkbox1" value="furnitures">
            Furnitures </label>
        </div>
      </li>
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" name="filter"  class="checkbox1" value="toys">
            Toys </label>
        </div>
      </li>
      <li> 
        <div class="radio" style="padding-left:0px">
          <label>
             <input type="checkbox" name="filter"  class="checkbox1" value="vehicles">
            Vehicles </label>
        </div>
      </li>
    </ul>

以下行无效

$('input[type="checkbox"]').change(function(){
  startexecution:
  alert('checkbox is changed');
  var number = [];
  $('input[type="checkbox"]:checked').each(function(){
    number.push($(this).val());
  });
  if(number.length == 0){
    alert('now it zero');
    $('.checkbox1').prop('checked', this.checked);
    $('.checkbox0').prop('checked', this.checked);
  }
});

如果数组编号的大小为0，则它会发出警报，现在它为零＆＃39;但是支柱功能线现在不能正常工作我很无奈所以请帮我解决这个错误。

Answer 1

在您的代码中，this.checked指的是您点击的框的状态 - 触发change()事件的框。因此，如果您选中了复选框，则this.checked将为true;如果取消选中复选框，则false将为$('input[type="checkbox"]').change(function() { console.log(this.checked); });。这是一个演示：

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

true

如果要选中所有复选框，请将checked属性设置为$('input[type="checkbox"]').change(function() { if ($('input[type="checkbox"]:checked').length == 0) { $('.checkbox1,.checkbox0').prop('checked', true); } });，而不是更改框的状态。下面，如果您的点击结果选中了零框，则会检查所有框。

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

<ul>
<li class="bg-0">
    <h2><a href="http://localhost/sublime/project/new-bikes/">New Bikes</a></h2>
    <span class="bg-0">http://localhost/sublime/wp-content/uploads/2016/10/new.jpg</span>
</li>
<li class="bg-1">
  <h2><a href="http://localhost/sublimes/project/smart-control/">Smart Control</a></h2>
  <span class="bg-1">http://localhost/sublime/wp-content/uploads/2016/10/smart.png</span>
</li>
<li class="bg-2">
  <h2><a href="http://localhost/sublime/project/laura/">Laura</a></h2>
  <span class="bg-2">http://localhost/sublime/wp-content/uploads/2016/10/laura.jpg</span>
</li>
</ul>

jQuery prop函数不起作用

1 个答案: