JavaScript Web API 全选反选案例
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 1.获取元素
// 1.1 获取全选复选框
let checkAll = document.querySelector('#checkAll')
// 1.2 获取文本容器
let all = document.querySelector('.all')
// 1.3 获取其它的复选框
let cks = document.querySelectorAll('.ck')
// 2.实现全选和全不选
// 用全选复选框的状态，赋值给下面的所有复选框
checkAll.addEventListener('click', function () {
// 2.1 先获取当前全选复选框经过这一次单击之后的状态
let state = checkAll.checked
// 2.2 将状态赋值给下面的所有复选框，伪数组需要遍历
cks.forEach(function (ele, index) {
ele.checked = state
})
all.innerText = state ? '取消' : '全选' //
})
实现全选和全不选 用全选复选框的状态，赋值给下面的所有复选框
// 设置一个全局的标记
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
// 实现方式就是获取当前被选中的 复选框的数量，与总数进行比较
// .ck:checked: 找到匹配的元素，只会匹配被选中的复选框
let count = document.querySelectorAll('.ck:checked').length
if (count === cks.length) {
checkAll.checked = true
all.innerText = '取消'
} else {
checkAll.checked = false
all.innerText = '全选'
}
实现方式就是获取当前被选中的 复选框的数量，与总数进行比较 .ck:checked: 找到匹配的元素，只会匹配被选中的复选框
<script>
// 1.获取元素
// 1.1 获取全选复选框
let checkAll = document.querySelector('#checkAll')
// 1.2 获取文本容器
let all = document.querySelector('.all')
// 1.3 获取其它的复选框
let cks = document.querySelectorAll('.ck')
// 2.实现全选和全不选
// 用全选复选框的状态，赋值给下面的所有复选框
checkAll.addEventListener('click', function () {
// 2.1 先获取当前全选复选框经过这一次单击之后的状态
let state = checkAll.checked
// 2.2 将状态赋值给下面的所有复选框，伪数组需要遍历
cks.forEach(function (ele, index) {
ele.checked = state
})
all.innerText = state ? '取消' : '全选'
})
// 设置一个全局的标记
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
// 实现方式就是获取当前被选中的 复选框的数量，与总数进行比较
// .ck:checked: 找到匹配的元素，只会匹配被选中的复选框
let count = document.querySelectorAll('.ck:checked').length
if (count === cks.length) {
checkAll.checked = true
all.innerText = '取消'
} else {
checkAll.checked = false
all.innerText = '全选'
}
})
}
</script>
全选和反选小结： 、给反选按钮注册事件 获取当前被选中的 复选框的数量，与总数进行比较
