html 复选框checkbox

统计选中复选框的个数

复制代码
<html>
<head>

<title>
</title>    

<script>        
function static_num() 
{            
    document.getElementById("btnOperate").onclick = function () {                
        var arr = new Array();                
        var items = document.getElementsByName("category");                 
        for (i = 0; i < items.length; i++) {                    
            if (items[i].checked) {                        
                arr.push(items[i].value);                    
            }                
        }                 
        alert("选择的个数为：" + arr.length);            
    };        
};    
</script>
</head>


<body>    
    <p><input type="checkbox" name="category" value="今日话题" />今日话题 </p>   
    <p><input type="checkbox" name="category" value="视觉焦点" />视觉焦点</p>
    <p><input type="checkbox" name="category" value="财经" />财经</p>    
    <p><input type="checkbox" name="category" value="汽车" />汽车</p>    
    <p><input type="checkbox" name="category" value="科技" />科技</p>    
    <p><input type="checkbox" name="category" value="房产" />房产</p>    
    <p><input type="checkbox" name="category" value="旅游" />旅游</p>    

    <p><input id="btnOperate" type="button" value="选择" onclick="static_num()" /></p>

</body>
</html>
复制代码

注：通过name标签获得对象：items = document.getElementsByName()

效果

点击复选框，执行相应的函数

复制代码
<html>
<head>

<title>
</title>    

<script>        
function mini(txt) 
{
    document.getElementById('show_text').innerHTML = txt;
}
</script>
</head>


<body>    
    <input type="checkbox" name="category" value="今日话题" onclick="mini('你好')"/>今日话题
    <div id="show_text"> </div>
</body>
</html>
复制代码

注：通过id获得对象：document.getElementsById()

效果

复选框的状态

复制代码
<html>
<head>

<title>
</title>    

<script>        

function my_func()
{
    var items = document.getElementsByName("category");
    document.getElementById("node" + String(1)).innerHTML = "node1" + ":" + items[0].checked;
    document.getElementById("node2" ).innerHTML = "node2" + ":" + items[1].checked;
}

</script>
<div id="node1">node1</div>
<div id="node2">node2</div>
</head>


<body>    
    <p><input type="checkbox" checked name="category" value="今日话题" onclick="my_func()"/>今日话题 </p>   
    <p><input type="checkbox" checked name="category" value="视觉焦点" onclick="my_func()"/>视觉焦点</p>

</body>
</html>
复制代码

注：checked属性反映复选框的状态

效果

执行前

执行后

层次关系，选中父节点，子节点全部选中

复制代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<script>
function allSelect(check_v, checkname)
{
    var v_item = document.getElementsByName(check_v);
    var items = document.getElementsByName(checkname);
    for (var i = 0; i < items.length; ++i)
    {
        if (v_item[0].checked)
        {
            items[i].checked = true;
        }
        else
        {
            items[i].checked = false;
        }
    }
}

function singleSelect2parent(check_v, checkname)
{
    var v_item = document.getElementsByName(check_v);
    var items = document.getElementsByName(checkname);
    var childStatus = true;
    for (var i = 0; i < items.length; ++i)
    {
        childStatus = (childStatus && items[i].checked);
    }
    if (childStatus)
    {
        v_item[0].checked = true;
    }
    else
    {
        v_item[0].checked = false;
    }
}

</script>
</head>
<body>

<p> <input type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')">版本一</p>
<ul>
    <p> <input type="checkbox" checked name="checkbox1" value="layer1" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">tiger_roads</p>
    <p> <input type="checkbox" checked name="checkbox1" value="layer2" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">poly_landmarks</p>
    <p> <input type="checkbox" checked name="checkbox1" value="layer3" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">poi</p>
</ul>

<p> <input type="checkbox" name="checkbox_v2" value="version2" onclick="allSelect('checkbox_v2', 'checkbox2')">版本二</p>
<ul>
    <p> <input type="checkbox" name="checkbox2" value="layer1" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')" >tiger_roads</p>
    <p> <input type="checkbox" name="checkbox2" value="layer2" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')">poly_landmarks</p>
    <p> <input type="checkbox" name="checkbox2" value="layer3" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')">poi</p>
</ul>
</body>

</html>
复制代码

注：<input type="checkbox" checked> type="checkbox" 后面的checked表示复选框默认是选中的。

效果

 

posted @   jihite  阅读(220360)  评论(1)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2013-06-01 【编程之美】字符串移位包含的问题（续）
点击右上角即可分享
微信分享提示
AI IDE Trae