JS: 复选框——ALL与A、B、C（选中ALL同时选中各子项）

最新推荐文章于 2022-09-22 16:08:57 发布

转载最新推荐文章于 2022-09-22 16:08:57 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cmzhphp2017/p/7604726.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的HTML页面示例，该页面使用JavaScript实现了全选复选框与多个单项选择复选框之间的联动功能。当点击全选框时，所有单项选择框的状态会随之改变；反之，当所有单项选择框都被选中时，全选框也会自动勾选。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  </style>
</head>
<body>
  <input id="big" type="checkbox"   onclick="bigChange(this)"/>ALL
  <br />
  <input name="small" type="checkbox" onclick="smallChange(this)" value=""/>A<br />
  <input name="small" type="checkbox" onclick="smallChange(this)" value=""/>B<br />
  <input name="small" type="checkbox" onclick="smallChange(this)" value=""/>C
</body>
</html>
<script type="text/javascript">
    function bigChange(obj) {var smObj = document.getElementsByName("small");
        if (obj.checked == false) {
            for (var i = 0; i < smObj.length; i++)
                smObj[i].checked = false;
        }else {
        for (var i = 0; i < smObj.length; i++)
                smObj[i].checked = true;
        }
    }
    function smallChange(obj) {
        var smObj = document.getElementsByName("small");
        var bigObj = document.getElementById("big");
        if (obj.checked == false){
            bigObj.checked = false;}
        else {
            var b = true;
            for (var i = 0; i < smObj.length; i++) {
                if (smObj[i].checked == true){
                    b = true;}
                else{b=false;
                break;}
            }
            if (b == true){
                bigObj.checked = true;}
            else{bigObj.checked=false;}
        }
    }
</script>