先搞一堆复选框
<table border="1">
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>全选<input type="checkbox" name="selectAll" id="selectAll" class="selectAll"></th>
</tr>
<tr>
<td class="contentCheckbox">内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
<td><input type="checkbox" name="" id="" class="content"></td>
</tr>
<tr>
<td class="contentCheckbox">内容222</td>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
<td><input type="checkbox" name="" id="" class="content"></td>
</tr>
<tr>
<td class="contentCheckbox">内容3</td>
<td>内容333</td>
<td>内容3</td>
<td>内容3</td>
<td>内容3</td>
<td><input type="checkbox" name="" id="" class="content"></td>
</tr>
<tr>
<td class="contentCheckbox">内容4</td>
<td>内容444</td>
<td>内容4</td>
<td>内容4</td>
<td>内容4</td>
<td><input type="checkbox" name="" id="" class="content"></td>
</tr>
</table>
<input type="button" value="获取选中框" class="getSelectValBtn">
下面是jQuery脚本
<script >
$().ready(function(){
$("#selectAll").click(function(){//这是全选框的脚本,点击全选和全不选
var isFlag = $("#selectAll").is(":checked");//获取全选框状态
$(".content").attr("checked", isFlag);//将其他复选框设置为状态设置跟全选框一样
});
$(".getSelectValBtn").click(function(){
var contentArr = $(".content");//获取除了全选框以外的复选框,这里我用的是类选择器,选中后返回的是一个数组
var contentValueArr=[];//创建一个数组来装我们选中的值
for (let index = 0; index < contentArr.length; index++) {//遍历我们获取到的数组
if ($(contentArr[index]).is(":checked")) {//判断状态是否为选中,如果是选中状态,我们就获取我们在该区域想要的值,再push进数组
console.log( $(contentArr[index]).parent().parent().children().first().text());
var contentVal = $(contentArr[index]).parent().parent().children().first().text();
contentValueArr.push(contentVal);
}
}
if (contentValueArr.length==0) {
alert("请勾选要删除的记录");
}
if ( contentValueArr.length>0 &&confirm("您选中了"+contentValueArr.length+"条记录,确定删除吗?") ) {
console.log(contentValueArr.toString());
}
});
});
</script>