checkbox组件
<!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>
总金额:<a id="aa"></a><br/>
<input type="button" value="金额总价" onclick="Sum();">
</body>
</html>
checkbox组件的更多相关文章
- DWZ-JUI 树形Checkbox组件 无法一次获取所有选中的值的解决方法
UI中 tree Checkbox 组件 在官方文档中提供的oncheck事件中只能够获取当前点击的权限值,而无法获取其他选中的值 <ul class="tree treeFolder ...
- 实现checkbox组件化(Component)
之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化.但是很显然,这样封装的checkbox组件复 ...
- 【转】Android学习基础自定义Checkbox组件
原文网址:http://forum.maiziedu.com/thread-515-1-1.html heckbox组件是一种可同时选中多项的基础控件,即复选框,在android学习中,Checkbo ...
- 微信小程序把玩(十五)checkbox组件
原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...
- Flutter——Checkbox组件、CheckboxListTile(多选框组件)
Checkbox组件 Checkbox组件常用的属性: 属性 描述 value true 或者 false onChanged 改变的时候触发的事件 activeColor 选中的颜色.背景颜色 c ...
- 微信小程序 checkbox 组件
checkbox 组件 是一个多选框组件,还可以使用 checkbox-group 组件 来进行绑定事件和实现,真正意义上的多选 checkbox的属性: value: 属性值 字符串 当在 chec ...
- JS中checkbox组件的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 使用vue的v-model自定义 checkbox组件
<template id='c'> <input type="checkbox" :checked="checked" v-on:change ...
- [Flex] 组件Tree系列 —— 支持CheckBox组件
主程序mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:支持CheckBox--&g ...
随机推荐
- MySQL主从复制中断处理一例
收到mysql主从中断报警邮件,马上登上服务器查看,发现是中继日志损坏. Show slave status\G,提示中继日志损坏,按以往的做法,根据提示重新指定合适的日志文件以及pos点. Rel ...
- 【原创】FPGA开发手记(三) PS/2键盘
以下内容均以Xilinx的Nexys3作为开发板 1.PS/2键盘简介 虽然Nexys3开发板是利用USB接口搭载键盘,但是其原理与PS/2键盘完全相同,现在就仅以PS/2键盘为例讲解如何将键盘搭 ...
- Android中使用proguardgui混淆jar包
本文章的前提条件是,读者已经掌握了正确导出jar包的技能. 1.拷贝Android项目中"proguard.cfg"文件到你指定的位置,并改名为"proguard.pro ...
- Android开发UI之补间动画-Tween Animation
Tween Animation-补间动画 官网链接-http://developer.android.com/reference/android/view/animation/Animation.ht ...
- 常见 jar包详解
常见 jar包详解 jar包 用途 axis.jar SOAP引擎包 commons-discovery-0.2.jar 用来发现.查找和实现可插入式接口,提供一些一般类实例化.单件的生命周期 ...
- URAL1017. Staircases
链接 简单递推 #include <iostream> #include<cstdio> #include<cstring> #include<algorit ...
- [HDU 1806] Frequent values
Frequent values Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- sqliteExpert软件使用(创建数据库和表)
sqliteExpert是sqlite数据库的可视化操作软件,通过该软件可以进行可视化的创建数据库以及表,免去了复杂的建表语句.首先在下面地址下载该软件http://www.ddooo.com/sof ...
- C#格式化数值结果表
C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) $2.000 D 十进制 string.Format("{0 ...
- InstallShield 一些事件说明
InstallShield 一些事件说明,和常量代码 大家可以把所有事件都点出来然后单步追踪就行了,我的经验是一般是从OnShowUI第一次显示UI界面开始,很容易就找到大家想处理的事件,另贴几个我发 ...