一、效果图
1.
2.
二、代码（可直接复制）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table class="multi-table" cellspacing="0" border>
<thead>
<tr>
<th> <input id="js-all-checkbox" type="checkbox" onclick="checkAll(this)"></th>
<th>序号</th>
<th>操作人</th>
<th>手机号码</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="select" value="1" oninput="clickCheckbox()"></td>
<td>1</td>
<td>张三</td>
<td>15278126625</td>
</tr>
<tr>
<td> <input type="checkbox" name="select" value="2" oninput="clickCheckbox()"></td>
<td>2</td>
<td>李四</td>
<td>15278126625</td>
</tr>
<tr>
<td><input type="checkbox" name="select" value="3" onclick="clickCheckbox()"></td>
<td>3</td>
<td>王五</td>
<td>15278126625</td>
</tr>
</tbody>
</table>
<h3>当前选中的是: <span id="js-check-text"></span></h3>
</body>
</html>
<script>
let checkValues = [];
function clickCheckbox(e) {
//拿到所有选择的dom复选框
let checkDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]:checked');
//拿到所有选择的dom复选框的值
checkValues = [];
for (let i = 0, len = checkDomArr.length; i < len; i++) {
var checkobj = {
}
checkobj.id = checkDomArr[i].parentNode.parentNode.children[1].innerHTML
checkobj.name = checkDomArr[i].parentNode.parentNode.children[2].innerHTML
checkobj.age = checkDomArr[i].parentNode.parentNode.children[3].innerHTML
checkValues.push(checkobj);
}
//更新当前选中的文本值
updateText();
//拿到所有的单选框dom
let allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]');
console.log(allCheckDomArr, 'allcheckdom---------')
//拿到复选框dom
let allCheckbox = document.getElementById('js-all-checkbox');
//遍历所有的单选框
for (let i = 0, len = allCheckDomArr.length; i < len; i++) {
//如果有一个单选框的check值为false，复选框都不能为true
if (!allCheckDomArr[i].checked) {
if (allCheckbox.checked) allCheckbox.checked = false;
break;
} else if (i === len - 1) {
//否则 遍历到i=len-1的时候(即最后一项单选框了)，任然不存在上种情况，说明单选框全部选中，此时复选框的checked值为true
document.getElementById('js-all-checkbox').checked = true;
return;
}
}
}
//复选功能
function checkAll(current) {
console.log(current, 'current-----------')
//拿到所有的单选框
let allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]');
//点击之后，如果复选框的checked值为false,说明没点击时为true，即是勾选状态，此时所有的单选框接下来应该为false
if (!current.checked) {
// 点击的时候, 状态已经修改, 所以没选中的时候状态时true
checkValues = [];
//遍历所有的单选框
for (let i = 0, len = allCheckDomArr.length; i < len; i++) {
//拿到当前遍历的单选框的checked值
let checkStatus = allCheckDomArr[i].checked;
//若为true（即选中状态），置为false
if (checkStatus) allCheckDomArr[i].checked = false;
}
} else {
//同理
//如果复选框为true，那么所有的单选框都应该被勾选
checkValues = [];
for (let i = 0, len = allCheckDomArr.length; i < len; i++) {
let checkStatus = allCheckDomArr[i].checked;
if (!checkStatus) allCheckDomArr[i].checked = true;
var checkobj = {
}
checkobj.id = allCheckDomArr[i].parentNode.parentNode.children[1].innerHTML
checkobj.name = allCheckDomArr[i].parentNode.parentNode.children[2].innerHTML
checkobj.age = allCheckDomArr[i].parentNode.parentNode.children[3].innerHTML
checkValues.push(checkobj);
}
}
//更新当前选中的文本值
updateText();
}
function updateText() {
document.getElementById('js-check-text').innerHTML = JSON.stringify(checkValues);
}
</script>