jquery 中 input checkbox 全选

使用 jQuery 来实现全选功能十分简单,可以通过以下几个步骤来实现:

  1. 在 HTML 页面中添加一个全选的 checkbox,并为需要选择的 checkbox 添加一个共同的类名(例如 checkbox-item)。
<input type="checkbox" id="check-all"> 全选
<input type="checkbox" class="checkbox-item">
<input type="checkbox" class="checkbox-item">
<input type="checkbox" class="checkbox-item">
  1. 使用 jQuery 来监听全选 checkbox 的 click 事件,并在事件处理程序中获取所有的需要选择的 checkbox,并设置它们的 checked 属性和全选 checkbox 的 checked 属性一致即可。
$(function() {
  $('#check-all').click(function() {
    $('.checkbox-item').prop('checked', $(this).prop('checked'));
  });
});

在这里,我们使用 jQuery 的 prop() 方法来设置 checkbox 的属性,第一个参数是属性名称(这里是 checked),第二个参数是属性值,即将全选 checkbox 的 checked 属性值赋给所有需要选择的 checkbox。

这样就完成了基于 jQuery 的全选功能的实现。当用户点击全选 checkbox 时,所有的需要选择的 checkbox 将会被同时选中或取消选中。

发表评论

邮箱地址不会被公开。 必填项已用*标注