<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function Sum(){
var ocheck=document.getElementsByName("no1");
var sum=0;/* 这里一定要给个初值，相当于要定义它为int型； */
for(var i=0;i<ocheck.length;i++){
if(ocheck[i].checked){
sum+=parseInt(ocheck[i].value);
}
}
var atext=document.getElementById("aa");
atext.innerHTML=(""+sum).fontcolor("red"); /*这个地方最好是用个空串连接一下 把它变成字符串输出*/
/* atext.innerText=(""+sum).fontcolor("red"); *//* innerText的区别与innerHTML的区别在与innerHTML可以直接设置颜色字体大小 */
}
function allsel(objAll){
var ocheck=document.getElementsByName("no1");
for(var i=0;i<ocheck.length;i++){
ocheck[i].checked=objAll.checked ;/*这里用全选的状态来设置其他的状态的变化 */
}
}
onload=function(){
var oitem=document.getElementsByName("no1");
for(var i=0;i<oitem.length;i++){
oitem[i].onclick=function(){
updatacheck();/*这里是内嵌函数,并且反复调用了Sum()函数时时进行更新 */
Sum();
}
}
}
function updatacheck(){
var n=0;
var oitems=document.getElementsByName("no1");
for(var i=0;i<oitems.length;i++){
if(oitems[i].checked){
n++;
}
}
if(n==0){
document.getElementById("checkAll").checked=false;
}
else if(n==oitems.length){
document.getElementById("checkAll").indeterminate=false;/* 这个地方要注意一下要先设置一下indeterminate这个属性才能够设置cheked属性*/
document.getElementById("checkAll").checked=true;
}
else{
document.getElementById("checkAll").indeterminate=true;
}
}
</script>
</head>
<body>
<h1>演示checkbox的用法</h1>
<input type="checkbox" value="3000" name="no1"><a>笔记本：3000</a><br/>
<input type="checkbox" value="6000" name="no1"><a>电脑：6000</a><br/>
<input type="checkbox" value="1000" name="no1"><a>手机：1000</a><br/>
<input type="checkbox" value="1400" name="no1"><a>Ipad：1400</a><br/>
<input type="checkbox" id="checkAll" onclick="allsel(this);"><a>全选</a>&nbsp;&nbsp;
总金额：<a id="aa"></a><br/>
<input type="button" value="金额总价" onclick="Sum();">
</body>
</html>

checkbox组件的更多相关文章

  1. DWZ-JUI 树形Checkbox组件 无法一次获取所有选中的值的解决方法

    UI中 tree Checkbox 组件 在官方文档中提供的oncheck事件中只能够获取当前点击的权限值,而无法获取其他选中的值 <ul class="tree treeFolder ...

  2. 实现checkbox组件化(Component)

    之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...

  3. 【转】Android学习基础自定义Checkbox组件

    原文网址:http://forum.maiziedu.com/thread-515-1-1.html heckbox组件是一种可同时选中多项的基础控件,即复选框,在android学习中,Checkbo ...

  4. 微信小程序把玩（十五）checkbox组件

    原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...

  5. Flutter——Checkbox组件、CheckboxListTile（多选框组件）

    Checkbox组件 Checkbox组件常用的属性: 属性 描述 value true 或者 false onChanged 改变的时候触发的事件  activeColor 选中的颜色.背景颜色 c ...

  6. 微信小程序 checkbox 组件

    checkbox 组件 是一个多选框组件,还可以使用 checkbox-group 组件 来进行绑定事件和实现,真正意义上的多选 checkbox的属性: value: 属性值 字符串 当在 chec ...

  7. JS中checkbox组件的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. 使用vue的v-model自定义 checkbox组件

    <template id='c'> <input type="checkbox" :checked="checked" v-on:change ...

  9. [Flex] 组件Tree系列 —— 支持CheckBox组件

    主程序mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:支持CheckBox--&g ...

随机推荐

  1. JQuery实现点击div以外的位置隐藏该div窗口

    简单示例代码: <body> <script type="text/javascript" src="http://ajax.googleapis.co ...

  2. c++模板注意事项

    c++模板类 分类: C++2012-08-20 21:28 7108人阅读 评论(2) 收藏 举报 c++编译器instantiationiostreamlinker编程 c++模板类 分类: 数据 ...

  3. 各种数据库使用JDBC连接的方式

    Java数据库连接(JDBC)由一组用 Java 编程语言编写的类和接口组成.JDBC 为工具/数据库开发人员提供了一个标准的 API,使他们能够用纯Java API 来编写数据库应用程序.然而各个开 ...

  4. maven 简单实用教程

    1. Maven介绍 1.1. 简介 java编写的用于构建系统的自动化工具. 目前版本是2.0.9,注意maven2和maven1有很大区别,阅读第三方文档时需要区分版本. 1.2. Maven资源 ...

  5. bzoj2259

    这道题很不错,首先读入方式有一种跳跃的既视感:读入Si之后,我们可以直接往后跳Si,可以想到最短路,设序列为a[],我们设n+1是终点如果i+a[i]<=n+1 那么i-->i+a[i] ...

  6. addlinkedserver

    http://blog.sina.com.cn/s/blog_5321db9d0100f89g.html --创建链接服务器 exec sp_addlinkedserver  'ITSV ', ' ' ...

  7. 转自 Because of you 的总结

    上下界网络流的问题严格的分,可以分为四类吧. 1:无源汇可行流  sgu 194 2:有源汇可行流  poj 2396  这题比较好,我建图建了将近200行 3:有源汇最大流  zoj 3496  这 ...

  8. Android获取IMSI和IMEI

    IMSI是一个 唯一的数字, 标识了GSM和UMTS 网络里的唯一一个用户. 它 存储 在手机的SIM卡里,它会通过手机发送到网络上. IMEI也是一串唯一的数字, 标识了 GSM 和 UMTS网络里 ...

  9. bzoj 3172 [Tjoi2013]单词（fail树，DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3172 [题意] 题目的意思是这样的,给若干个单词,求每个单词在这一堆单词中的出现次数. ...

  10. POJ 3279 Fliptile （质量不错）

    题意:有一个M*N的棋盘,每一个格子只有两种状态0或1,每次可以选择一个格子执行翻转操作,并且与该格子相邻的4个格子都会被翻转,求将所有格子都翻转成0所需要的最小操作数,若有多种方案,输出字典序最小的 ...