统计选中复选框的个数

<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. 「BZOJ 1001」狼抓兔子

    题目链接 luogu bzoj \(Solution\) 这个貌似没有什么好讲的吧,直接按照这个给的图建图就好了啊,没有什么脑子,但是几点要注意的: 建双向边啊. 要这么写,中间还要写一个\(whil ...

  2. Javascript判断两个点(经纬度)的距离，以及是否在某个区域内(经纬度字符串)

    JS计算两个点(经纬度)的距离 function getGreatCircleDistance(lat1, lng1, lat2, lng2) { var EARTH_RADIUS = 6378137 ...

  3. bzoj1867钉子和小球

    题目链接 简单$DP$ $$dp[1][1]=1(\text{显然})$$ $$map[i][j]=='*'?dp[i+1][j]+=dp[i][j]/2,dp[i+1][j+1]+=dp[i][j] ...

  4. 一个简单的Samba服务

    上次给大家认识了下,搭建一个服务大概的一个认识. 这次给大家搭建一个Samba服务认识下. 项目准备: 虚拟机一个(Centos6.5版本) 项目目标: 进行samba最简单的配置 项目难度: ❤❤ ...

  5. NPOI.XWPF生成WORD，设置Table单元格的背景色

    tr.GetCell().SetColor("#fbd4b4");

  6. 【BZOJ1047】[HAOI2007]理想的正方形 （倍增ST表）

    [HAOI2007]理想的正方形 题目描述 有一个\(a*b\)的整数组成的矩阵,现请你从中找出一个\(n*n\)的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: ...

  7. 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

    实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...

  8. ionic3 IPX留海适配

    解决:使用 safe-area-inset-top 等 ios 安全区域变量 + meta 标签中设置 viewport-fit=cover https://github.com/pengkobe/r ...

  9. Java 实现手机发送短信验证码

    Java 实现手机发送短信验证码 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ,之后想要在使用就得花钱了.简单的操作 ...

  10. oracle三种连接身份

    登录oracle数据库有三种连接身份   sysdba:数据库管理员,sysyoper:数据库操作员,normal:普通用户. "sysdba" 即数据库管理员 权限包括:   打 ...