全选、取消选择、反选、删除

最新推荐文章于 2022-09-04 10:05:06 发布

原创最新推荐文章于 2022-09-04 10:05:06 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现对多个复选框的全选、取消选择、反选及删除已选的功能。通过示例代码详细展示了如何通过getElementById, getElementsByTagName等方法获取DOM元素，并绑定点击事件实现对Checkbox的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选、取消选择、反选、删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>全选</button>
    <button>取消选择</button>
    <button>反选</button>
    <button>删除</button>
    <div class="div">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </div>
</body>
</html>
<script>
    window.onload =function(){
        var btn = document.getElementsByTagName('button');
        //button可以使用input中的button，我这里是为了避免冲突
        var div = document.querySelector('.div');
        //将checked放入一个div中，可以避免与之前的btn冲突；
        var inp = div.getElementsByTagName('input');
        btn[0].onclick =function(){
            for(var i =0;i<inp.length;i++){
                inp[i].checked = true;
            }
        }
        btn[1].onclick =function(){
            for(var i =0;i<inp.length;i++){
                inp[i].checked = false;
            }
        }
        btn[2].onclick =function(){
            for(var i =0;i<inp.length;i++){
                if(inp[i].checked == true){
                    inp[i].checked = false; 
                }else{
                    inp[i].checked = true;
                }
            }
        }
        btn[3].onclick =function(){
            for(var i =0;i<inp.length;i++){
                if(inp[i].checked == true){
                    inp[i].style.display = 'none';  
                }
            }
        }
    } 
</script>

获取节点：
document.getElementById() 通过id名获取节点(集合)+索引[]来确定选取的是哪一个
document.getElementsByTagName() 通过标签名获取节点(获取的是一个集合)+索引[]来确定选取的是哪一个
document.getElementsByClassName() 利用class名（./# +class名）获取节点
document.querySelectorAll() ()里面可以是标签名或class名，获取的是一个集合,+索引[]来确定选取的是哪一个
document.querySelector() /获取是一个节点
onload 事件：
当页面完全加载完，触发onload事件;
代码是从上往下进行执行的，当js放在head或者body中是会出现页面还未加载完成，js中的代码已经被执行，导致整个js功能不能全部实现，这个时候需要加入onload。