ningyang
侠客
侠客
  • 最后登录2025-03-07
  • 发帖数11
阅读:2757回复:0

[es 6]DOM多选,反选,全选案例

楼主#
更多 发布于:2023-01-17 11:32


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- <style>
    *{
        font-family: 微软雅黑;
        margin: 0px;
        padding: 0px;
    }
    </style> -->
</head>
<body>
    <form action="javascript:">
        <p>选择爱好:</p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p><label><input type="checkbox" name="">爬山</label></p>
        <p>
            <button id='all'>全选</button>
            <button id='noall'>全不选</button>
            <button id='unall'>反选</button>
        </p>
    </form>
</body>
<script>
    all=document.getElementById('all');
    noall=document.getElementById('noall');
    unall=document.getElementById('unall');
    objs=document.getElementsByTagName('input');
    //全选
    all.onclick=function(){
    for(i=0;i<objs.length;i++){
            objs.checked=true;
        }
    }
    //全不选
    noall.onclick=function(){
    for(i=0;i<objs.length;i++){
            objs.checked=false;
        }
    }
    //反选
    unall.onclick=function(){
    for(i=0;i<objs.length;i++){
        // if(objs.checked){
        //     objs.checked=false;
        // }else{
        //     objs.checked=true;
        // }
        
        //三元运算符改进
        //objs.checked=objs.checked?false:true;
        //一元运算符
        objs.checked=!objs.checked;
    }
}
</script>
</html>
游客


返回顶部

公众号

公众号