统计选中复选框的个数

<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. ASP.NET伪静态配置

    一.下载URLRewriter.dll 二.在项目中添加URLRewrite的引用 三.配置webconfig 1.在<configuration>节点中添加: <configSec ...

  2. C#多线程编程实战1.6线程优先级

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

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

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

  4. 20165219 2017-2018-2 《Java程序设计》第9周学习总结

    20165219 2017-2018-2 <Java程序设计>第9周学习总结 课本知识总结 URL类 URL类是java.net包中的一个重要的类,使用URL创建对象的应用程序称为客户端程 ...

  5. 20165219 《Java程序设计》实验三（敏捷开发与XP实践）实验报告

    20165219 <Java程序设计>实验三(敏捷开发与XP实践)实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:王彦博 学号:20165219 成绩: 指导教 ...

  6. sql中日期转换

    date_format的函数使用令日期格式转换变得十分便捷首先先说一个自己粗心踩到的坑.因为最开始自己建的表里面存的数据,已经固定是周一的时间了,然后有一个状态判断是需要拿到所有周一是否有数据,当时忘 ...

  7. win10 + Lubuntu 双系统安装

    win10 + Lubuntu 双系统安装 最近重装了系统,索性直接安装win10 + Lubuntu 双系统,便于在物理机下进行 Linux开发. 这里我选择的 Linux 发行版是 Lubuntu ...

  8. 使用原生实现jquery中的css方法

    由于jquery放在mobile页面上,有时候还是显得有点大,所以今天尝试使用原生来开发,但是习惯了jquery之后,转用原生开发之后,发现原生中,找不到可以替代jquery的css方法,于是对原生的 ...

  9. 用 GitLab CI 进行持续集成

    简介 从 GitLab 8.0 开始,GitLab CI 就已经集成在 GitLab 中,我们只要在项目中添加一个 .gitlab-ci.yml 文件,然后添加一个 Runner,即可进行持续集成. ...

  10. Haproxy配置之URL重写,支持websocket

    配置文件位置:/etc/haproxy/haproxy.cfg Reqrep 正则重写 配置详情: Frontend App *: acl uri_api path_beg /api/ acl uri ...