统计选中复选框的个数

<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语言编程学习：链表的来源分析

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...

  2. angular 基本依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...

  3. Xcode面板的使用

    1.调出打包输出管理界面Xcode->Window->Organizer

  4. 第一篇 Python的数据类型

    Python的标准数据类型有五种: (1)字符串 (2)数字(包括整数,浮点数,布尔,复数) (3)列表(list) (4)元组(tuple) (5)字典(dict) 注:使用type函数可以查看对象 ...

  5. Atcoder Beginner Contest 121D（异或公式）

    #include<bits/stdc++.h>using namespace std;int main(){    long long a,b;    cin>>a>&g ...

  6. PHP选项和运行

    PHP运行模式 五大运行模式 1.cgi 通用网关接口 2.fast-cgi cgi升级 3.cli (Command Line Interface) 4.isapi 微软提供的面向Internet服 ...

  7. hexo的jacman主题配置

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 这是在我搭建博客时用的主题,这个主题时基于pacman修改的,同时我也是借助于wuchong同时他还在一直更新.一下时我的一些基本配置: 相关文章 ...

  8. 帝国cms刷新内容页提示.phome_ecms_news_data_' doesn't exist

    帝国cms后台刷新提示.phome_ecms_news_data_' doesn't exist解决方法: 刷新所有信息内容页面时提示“Table '*.phome_ecms_article_data ...

  9. loj2289 [THUWC 2017]在美妙的数学王国中畅游(LCT+Taylor展开)

    link 题目大意: 你需要维护一个树 每个点都有个sin(ax+b)或exp(ax+b)或ax+b 你需要维护一些操作:连边.删边.修改某个点的初等函数.询问某条树链上所有函数带入某个值后权值和或不 ...

  10. 洛谷 P2096 最佳旅游线路

    某旅游区的街道成网格状.其中东西向的街道都是旅游街,南北向的街道都是林阴道.由于游客众多,旅游街被规定为单行道,游客在旅游街上只能从西向东走,在林阴道上则既可从南向北走,也可以从北向南走. 阿龙想到这 ...