/** 全选或全不选事件 */ $(function () { //点击全选 $(document).delegate("#checkAll", "click", function () { var isChecked = $(this).prop("checked"); var $thisTable = $(this).parents(".commonTable"); var $row = $thisTable.find("tbody tr"); //考虑用fixHeaderTable插件的情况 if ($row.length <= 0) { $row = $(this).parents(".fht-table-wrapper").find(".fht-tbody tbody tr"); } for (var i = 0; i < $row.length; i++) { if (!isChecked) { $row.eq(i).find("input[type = 'checkbox']").prop("checked", false); $row.eq(i).removeClass("selected"); } else { $row.eq(i).find("input[type = 'checkbox']").prop("checked", true); $row.eq(i).addClass("selected"); } } }); });
效果：点击表头可以选中全部数据，再次点击取消选中下面全部数据
设置表头中的input的id="checkAll"，table的样式为commonTable
请求到后端的js方法：
function apply() { var checked = $("input[type='checkbox']:not(#checkAll):checked"); if (!checked.length) { $.alert("没有选中任何一行", false); } else { art.dialog.confirm('请确认是否申报？', function () { var ids = ""; checked.each(function () { ids += $(this).val() + ","; }); ids = ids.substr(ids, ids.length - 1); $.pikaQajax({ url: "/express-process/app-overshipment-apply", data: {"ids": ids}, type: "post", success: function (data) { if (data.status === 200) { $.alert("申报成功", true); $("input[type=checkbox]:not(#checkAll):checked").prop("checked", false); } else { $.alert(data.msg); } } }); }, function () { art.dialog.tips('你取消了操作'); art.dialog.close(); }); } }
