javascript - jQuery:将复选框的视觉输出更改为已选中

Question

当我遍历所有附加了 .category 类的复选框并尝试将复选框的视觉输出更改为已选中时，没有任何反应。变量 'state' 返回 true 或 false，用于更改当前视觉输出的元素。此时此刻什么也没有发生，我不知道为什么。

HTML:

<input type="checkbox" class="category">checky 1</span>
<input type="checkbox" class="category">checky 2</span>
<input type="checkbox" class="category">checky 3</span>

JS:

$('body').on('click','.category',click);

function click(){
  $('.category').each(function(i,element){
    var state = $(element).prop('checked');
    $(element).prop('checked', state);
  });

  return false;
}

提前致谢。

Answer 1

请注意，没有任何反应，因为您在事件处理程序中使用了 return false。这将阻止(取消)选中该复选框。

如果您尝试实现全选选项，只需执行以下操作:

$(".category:first").on("click", function() {
  $(".category").prop("checked", this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" class="category"/> Select all</label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>
<label><input type="checkbox" class="category"/></label><br>