在开发前端页面过程中,我们经常需要使用表格来展示数据,通常会给表格每一行的前面添加一个复选框,用于选择其中的行。如果页面上需要选择的行较多,那么手动一个一个地去勾选复选框显然是不太可行的。幸运的是,我们可以通过使用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函数,它首先获取了表格中所有的复选框,并添加了两个事件监听器。第一个监听器用于当主选择框被选中时,其它选择框也被选中;第二个监听器用于当任意一个选择框被取消选择时,主选择框也应该被取消选择。
这个函数非常简单,但却非常有用。我们可以将它应用于任何需要使用表格选择框的页面中,提高页面的可用性和用户体验。