11.15作业-完成table.html中按钮全选、全不选、反选的功能。

最新推荐文章于 2022-03-05 15:20:32 发布

再让我多睡几分钟

最新推荐文章于 2022-03-05 15:20:32 发布

阅读量510

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/Zaiaj/article/details/78541703

版权

作业专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>请选择您的爱好：</h1>
<input type="checkbox" onchange="" checked="checked" />全选/全不选<br />
<input class="hobby" type="checkbox" name="hobby" />足球
<input class="hobby" type="checkbox" name="hobby" />篮球
<input class="hobby" type="checkbox" name="hobby" />游泳
<input class="hobby" type="checkbox" name="hobby" />唱歌 <br />
<input type="button" value="全 选" onclick="allcheck()"/>
<input type="button" value="全不选" onclick="onallcheck()"/>
<input type="button" value="反选" onclick="overturnCheck()"/>


<script type="text/javascript">
    var checkboxs = document.getElementsByClassName('hobby');
    console.log(checkboxs);
    function allcheck(){
        for(var i=0;i<checkboxs.length;i++){
            checkboxs[i].checked=true;
        }
    }
    function onallcheck(){
        for(var i=0;i<checkboxs.length;i++){
            checkboxs[i].checked=false;
        }
    }
    function overturnCheck(){
        for(var i=0;i<checkboxs.length;i++){
            checkboxs[i].checked=!checkboxs[i].checked;
        }
    }

</script>   
</body>

</html>

再让我多睡几分钟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
11.15作业-完成table.html中按钮全选、全不选、反选的功能。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <h1>请选择您的爱好：</h1><input type="checkbox" onchange="" checked="checked" />全选/全不选<br /><
复制链接

扫一扫

专栏目录