点击复选框将选中的个数及名称打印在文本框中（利用数组进行存储，复选框控件的checked属性）

最新推荐文章于 2020-07-30 00:04:55 发布

一只极度渴望成长的Giser

最新推荐文章于 2020-07-30 00:04:55 发布

阅读量355

点赞数

分类专栏： Javascript、JQuery练习文章标签：点击复选框将选中的个数及名称打印在文本框中（利用数组进行存储，复选框控

本文链接：https://blog.csdn.net/qq_32077521/article/details/97653814

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        #txt1 {
            width: 300px;
            height: 30px;
        }
    </style>
    <div id="div1">
        <input type="checkbox" value="张三" />张三
        <input type="checkbox" value="李四" />李四
        <input type="checkbox" value="王五" />王五
        <input type="checkbox" value="赵六" />赵六
    </div>
    <input type="text" id="txt1" />
    <script type="text/javascript">
        var inputObjs = document.getElementById('div1').getElementsByTagName('input');        
        var txtObj = document.getElementById('txt1');             
        var array = new Array();
        window.onload = function () {            
            for (var i = 0; i < inputObjs.length; i++) {
                inputObjs[i].onclick = function () {
                    if (this.checked == true) {
                        array[array.length] = this.value;
                    }
                    else {
                        array.splice(array.indexOf(this.value), 1);//splice()方法是对数组元素进行删除，插入，以及替换
                    }
                   //数组的toString()方法是返回数组元素用间隔符连接起来的字符串
                    document.getElementById('txt1').value = '共选中' + array.length + '人，名字为：' + array.toString();
                };
            }
            
        };
    </script>
</body>
</html>

一只极度渴望成长的Giser

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
点击复选框将选中的个数及名称打印在文本框中（利用数组进行存储，复选框控件的checked属性）

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /></...
复制链接

扫一扫