用JavaScript实现多选框的全选和反选

最新推荐文章于 2023-01-08 21:53:32 发布

rAAAAAAAAy

最新推荐文章于 2023-01-08 21:53:32 发布

阅读量312

点赞数

分类专栏：制作方法效果实现文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/woshileiyaohua/article/details/108994405

版权

效果实现同时被 3 个专栏收录

8 篇文章

订阅专栏

制作

7 篇文章

订阅专栏

方法

5 篇文章

订阅专栏

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框的全选和反选</title>
</head>
<body>
    <div>
        <label for="check1">苹果</label><input type="checkbox" id="check1">
        <label for="check2">香蕉</label><input type="checkbox" id="check2">
        <label for="check3">橘子</label><input type="checkbox" id="check3">
        <label for="check4">榴莲</label><input type="checkbox" id="check4">
        <label for="check5">石榴</label><input type="checkbox" id="check5">
        <label for="check6">甘蔗</label><input type="checkbox" id="check6">
        <label for="check7">葡萄</label><input type="checkbox" id="check7">
    </div>
    <p></p>
    <input type="button" value="全选">
    <input type="button" value="全不选">
    <input type="button" value="反选">
    <script src="./js/fanxuan.js"></script>
</body>
</html>

javaScript

let inEle = document.querySelectorAll('div>input');
let inEle1 = document.querySelectorAll('body>input')[0];
let inEle2 = document.querySelectorAll('body>input')[1];
let inEle3 = document.querySelectorAll('body>input')[2];
//给全选键添加时间监听
inEle1.addEventListener('click',function(){
    for(let i=0;i<inEle.length;i++){//将所有input的checked值改为true
        inEle[i].checked=true;
    }
});
//给全不选键添加时间监听
inEle2.addEventListener('click',function(){
    for(let i=0;i<inEle.length;i++){//将所有input的checked值改为false
        inEle[i].checked=false;
    }
});
//给反选键添加时间监听
inEle3.addEventListener('click',function(){
    for(let i=0;i<inEle.length;i++){//判断每个input的checked值,为true改为false,为false改为true
        if(inEle[i].checked){
            inEle[i].checked=false;
        }else{
            inEle[i].checked=true;
        }
    }
})