统计选中复选框的个数

<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表示复选框默认是选中的。

效果

html 复选框checkbox的更多相关文章

  1. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  2. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  3. 复选框(checkbox)、单选框（radiobox）的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  4. php 判断复选框checkbox是否被选中

    php 判断复选框checkbox是否被选中   复选框checkbox在php表单提交中经常被使用到,本文章通过实例向大家介绍php如何判断复选框checkbox中的值是否被选中,需要的朋友可以参考 ...

  5. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  6. 3.Android之单选按钮RadioGroup和复选框Checkbox学习

    单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...

  7. Jquery操作复选框(CheckBox)的取值赋值实现代码

    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...

  8. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

  9. 关于bootstrap--表单（下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>）

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  10. QTableView中嵌入复选框CheckBox 的四种方法总结

    搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...

随机推荐

  1. 解决golang windows调试问题：Could not determine version number: could not find symbol value for runtime.buildVersion

    版本信息: go:1.8.3 windows: win7/64 idea-go-plugin:171.4694.61 在windows下,使用dlv进行调试的时候,如果golang程序引入了c模块,比 ...

  2. windows windows server2003 开机自动挂盘

    windows  windows server2003 开机自动挂盘 方案一: 设置任务计划:开机启动 方案二: 将执行文件放入启动文件夹

  3. java -jar jar包，运行报错没有主清单和无法加载主类

    jar: 包名(class 文件) META-INF(MANIFEST.MF ) .classpath 1.从eclipse直接导出的jar包: 2.修改MANIFEST.MF文件:

  4. stegsolve的功能

  5. Mysql数据库申请

    前段时间大部门下新成立了一个推广百度OCR.文字识别.图像识别等科技能力在金融领域应用的子部门.因为部门刚成立,基础设施和人力都是欠缺的.当时分到我们部门的任务是抽调一个人做新部门主站前端开发工作.本 ...

  6. 详细解读Python中的__init__()方法

    init()方法意义重大的原因有两个.第一个原因是在对象生命周期中初始化是最重要的一步:每个对象必须正确初始化后才能正常工作.第二个原因是init()参数值可以有多种形式. 因为有很多种方式为init ...

  7. shell-004：检测机器存活或者网络陡动情况！

    如下图情况,我们监测的就是此数据,当大于50%了,我们就可以设置告警等! #!/bin/bash # 用ping检测一台机器的存活或者网络波动情况 # 检测机器的丢包率来检测网络波动情况!! n=`p ...

  8. 转 JavaScript里的数组转化新方法Array.From

    过去,我们使用各种各样的方法来将类似Array对象的东西(比如 arguments 和 NodeList) 转换成真的数值.比如下面这个: 将NodeList转换成数组 基本上,这些东西我们都可以使用 ...

  9. 【转】xml文件中加入本地的dtd约束文件

    首先,我是以加载Struts2的来演示: 1 我们可以看到,越是文件中的 显示的是PUBLIC, 即从网络中获取约束文件dtd ,此时我需要将其配置成从自己的本地来获取dit文件 首先,先要有stru ...

  10. Luogu P1436 棋盘分割 暴力DP

    我的天,,,,,n=8,k<=15,,,这怕不是暴力DP+高维数组.... 开一个五维数组f[k][i][j][p][q]表示从(i,j)到(p,q)中分成k个矩形最小的平方和. 然后初始化时用 ...