淘先锋技术网

首页 1 2 3 4 5 6 7

在开发前端页面过程中,我们经常需要使用表格来展示数据,通常会给表格每一行的前面添加一个复选框,用于选择其中的行。如果页面上需要选择的行较多,那么手动一个一个地去勾选复选框显然是不太可行的。幸运的是,我们可以通过使用jQuery来实现表格行的全选功能。

$(function () {
// 获取表格中所有的复选框
var checkboxes = $('table input[type="checkbox"]');
// 当选择框全选时,其它选择框全部选中
$('#check-all').click(function () {
checkboxes.prop('checked', $(this).prop('checked'));
});
// 当任意一个选择框取消选择,全选选择框也取消选择
checkboxes.click(function () {
$('#check-all').prop('checked',checkboxes.length==checkboxes.filter(':checked').length);
});
});

以上是一个简单的jQuery函数,它首先获取了表格中所有的复选框,并添加了两个事件监听器。第一个监听器用于当主选择框被选中时,其它选择框也被选中;第二个监听器用于当任意一个选择框被取消选择时,主选择框也应该被取消选择。

这个函数非常简单,但却非常有用。我们可以将它应用于任何需要使用表格选择框的页面中,提高页面的可用性和用户体验。