DOM表单（复选框）

在表单中，尤为重要的一个属性是name

复制代码
<!--复选框的全选、全不选、反选-->
<!DOCTYPE>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>复选框的全选、全不选、反选</title>
</head>
<body>
<form id="form">
    <input type="checkbox" name="check" value="北京"  />北京
    <input type="checkbox" name="check" value="上海" />上海
    <input type="checkbox" name="check" value="广州" />广州

    <br>
    <input type="button" name="checkAll" value="全选"/>
    <input type="button" name="checkNone" value="全不选"/>
    <input type="button" name="checkOpp" value="反选"/>
</form>
<script>
    var oForm=document.getElementById("form");
    var Allbtn=oForm.checkAll;
    var Nonebtn=oForm.checkNone;
    var Oppbtn=oForm.checkOpp;

    Allbtn.onclick= function () {
        for(var i=0;i<oForm.check.length;i++){
            oForm.check[i].checked=true;
        }

    }

    Nonebtn.onclick= function () {
        for(var i=0;i<oForm.check.length;i++){
            oForm.check[i].checked=false;
        }

    }

    Oppbtn.onclick= function () {
        for(var i=0;i<oForm.check.length;i++) {
            if (oForm.check[i].checked){ //被选中
                oForm.check[i].checked=false;
            }
            else{
                oForm.check[i].checked=true;
            }
        }
    }
</script>
</body>
</html>
复制代码

 

posted @   tuna-  阅读(295)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手