复选框的全选与反选功能

是搭嘎

于 2023-08-15 18:38:10 发布

阅读量125

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_75250529/article/details/132304899

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox" id="i1" class="tab">
<input type="checkbox" id="i2" class="tab">
<input type="checkbox" id="i3" class="tab">
<input type="checkbox" id="i4" class="tab">
<input type="button" id="i5" >全选
<input type="button" id="i6" >反选
</body>
<script>
    document.getElementById('i5').addEventListener('click',function () {
        var c=document.getElementsByClassName('tab')
        for (let i = 0; i < c.length; i++) {
                c[i].checked=true;
        }
    })
    document.getElementById('i6').addEventListener('click',function () {
        var d=document.getElementsByClassName('tab')
        for (let i = 0; i < d.length; i++) {
            d[i].checked=false
        }
    })
</script>
</html>