全选单选按钮案例

Fly_hao.belief

于 2024-07-06 16:19:17 发布

阅读量899

点赞数 24

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_77451464/article/details/140231283

版权

<!DOCTYPE html>

<html>

<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>

</head>

<body>

<table>

<tr>

</th>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>小米净水器</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

// 1. 获取大复选框

const checkAll = document.querySelector('#checkAll')

// 2. 获取所有的小复选框

const cks = document.querySelectorAll('.ck')

// 3. 点击大复选框注册事件

checkAll.addEventListener('click', function () {

// 得到当前大复选框的选中状态

// console.log(checkAll.checked) // 得到是 true 或者是 false

// 4. 遍历所有的小复选框让小复选框的checked = 大复选框的 checked

for (let i = 0; i < cks.length; i++) {

cks[i].checked = this.checked

}

})

// 5. 小复选框控制大复选框

for (let i = 0; i < cks.length; i++) {

// 5.1 给所有的小复选框添加点击事件

cks[i].addEventListener('click', function () {

// 判断选中的小复选框个数是不是等于总的小复选框个数

// 一定要写到点击里面，因为每次要获得最新的个数

// console.log(document.querySelectorAll('.ck:checked').length)

// console.log(document.querySelectorAll('.ck:checked').length === cks.length)

伪类选择器

checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length

//document.querySelectorAll('.ck:checked').length === cks.length返回true或者false

})

}

</script>

</body>

</html>

Fly_hao.belief

关注

24
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫