统计选中复选框的个数

<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. C++初始化，之不明白篇 cout<<x<<endl 与 cout<<"x = "<<cout<<x<<endl的输出的值会不一样

    代码如下 #include <iostream> using namespace std; class point { public :     int x;     int y;     ...

  2. 制作百度地图离线JavaScript API加载本地瓦片地图

    全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...

  3. C#7.0连接MySQL8.0数据库的小笔记

    1.要连接MySql数据库必须首先下载MySql官方的连接.net的文件,文件下载地址为https://dev.mysql.com/downloads/connector/net/6.6.html#d ...

  4. Android SDK下载和更新慢或失败的解决办法

    下载完Android SDK后发现无法更新,原因是我们被墙了,所以需要使用代理来更新,或者直接把dl-ssl.google.com解析的IP改一下就可以了 用文本编辑器打开文件C:\Windows\S ...

  5. vs2015+opencv3.3.1 实现 c++ 直方图均衡化

    //直方图均衡化 https://github.com/scutlzk #include <opencv2\highgui\highgui.hpp> #include <iostre ...

  6. nova挂载volume源码分析

    当nova volume-attach instance_uuid volume_uuid 执行后,主要流程如下: 使用的存储类型是lvm+iscis 1.nova client解析该命令行,通过re ...

  7. Mysql初识数据库《二》数据库管理软件的由来

    数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件都运 ...

  8. 842. Split Array into Fibonacci Sequence

    Given a string S of digits, such as S = "123456579", we can split it into a Fibonacci-like ...

  9. php代码审计5审计命令执行漏洞

    命令执行漏洞:通过易受攻击的应用程序在主机操作系统上执行任意命令,用户提供的数据(表单,cookie,http头等)未过滤 挖掘思路:用户能够控制函数输入,存在可执行代码的危险函数 命令执行和代码执行 ...

  10. Python3 + django2.0 + apache2 + ubuntu14部署网站上线

    自己尝试在本地搭建了 Django 项目后,想部署到自己云服务器上,经常多次尝试和多次踩坑(捂脸),总结如下: 环境:ubuntu14, django2.0, apache2. 1.首先安装需要的库包 ...