jquery+表格行全选

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！