DOM表单（复选框）

最新推荐文章于 2021-11-26 20:09:20 发布

weixin_34343308

最新推荐文章于 2021-11-26 20:09:20 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/dll-ft/p/5492057.html

版权

在表单中，尤为重要的一个属性是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>