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

最新推荐文章于 2024-11-06 08:39:07 发布

原创最新推荐文章于 2024-11-06 08:39:07 发布 · 433 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

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

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

69 篇文章

订阅专栏

本文展示了一个简单的HTML页面，其中包含多个复选框和一个文本框。当用户选择复选框时，所选项目的名称将自动显示在文本框中，实现了输入动态更新的功能。此示例使用了基本的JavaScript来处理用户交互。

<!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>