使用 jQuery 来实现全选功能十分简单,可以通过以下几个步骤来实现:
- 在 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">
- 使用 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 将会被同时选中或取消选中。