计算选择的个数

最新推荐文章于 2021-03-10 11:19:50 发布

数星星的小贝壳

最新推荐文章于 2021-03-10 11:19:50 发布

阅读量342

点赞数

分类专栏： JavaScript 编程练习文章标签：复选框总数 javascript

本文链接：https://blog.csdn.net/leledexixi/article/details/55718054

版权

JavaScript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

编程练习

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算选择的个数</title>
    <script type="text/javascript">
        window.onload = function () {
            // 获取元素
            var list = document.getElementById('list');
            var inputs = list.getElementsByTagName('input');
            var ret = document.getElementById('ret');
            var ok = document.getElementById('ok');

            // 添加按钮点击事件
            ok.onclick = function () {
                var i = 0,
                    len = inputs.length,
                    checked = 0;

                // 遍历所有的勾选框，计算出已选总数,存放在变量checked
                while(i < len) {
                   if(inputs[i].checked){  //checked为input属性
                       checked+=1;
                   }
                   i++;
                }

                //根据checked值更新结果
                if(checked>0){
                    ret.style.display="block";
                    ret.innerHTML="已选:"+ checked;
                }else{
                    ret.style.display="none";
                    ret.innerHTML="";
                }       
            }
        }
    </script>
</head>
<body>
<ul id="list">
<!--注意label的用法-->
    <li><input type="checkbox"/>1</li>
    <li><input type="checkbox"/><label>2</label></li>
    <li><label><input type="checkbox"/>3</label></li>
    <li><label><input type="checkbox"/>4</label></li>
    <li><label><input type="checkbox"/>5</label></li>
</ul>
<button id="ok">确定</button>
<p id="ret" style="display: none"></p>
</body>
</html>

数星星的小贝壳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算选择的个数

计算选择的个数 window.onload = function () { // 获取元素 var list = document.getElementById('list'); var inputs = list.getElementsByTagName('input');
复制链接

扫一扫