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 ...
随机推荐
- RESTFul API 一些文章
http://www.ibm.com/developerworks/cn/web/1103_chenyan_restapi/index.html
- wzplayer V1.6正式版(无限制)不支持加密版本 2014-07-08
2014-07-08 修复部分视频倾斜问题,同时给受影响的客户给予更新. wzplayer V1.6正式版(无限制)不支持加密版本 发布于官方,下载地址wzplayer V1.6正式版(无限制)不支持 ...
- Standard Attachments in Oracle Form 标准附件
Standard Attachments in Oracle Form 默认情况下"附件"按钮是灰色的,本文将展示如何让某个Form的附件按钮变亮,并能上传附件. 以用户Form为 ...
- SSH框架应用中常用Jar包用途介绍
struts2需要的几个jar包:1)xwork-core-2.1.62)struts2-core-2.1.83)ognl-2.7.34)freemarker-2.3.155)commons-io-1 ...
- vijosP1567子串计数
描述现在有一个字符串,请求出这个字符串不相同的子串个数.YXY现在不会做,请你来帮忙…… n<=20W 题解: 后缀数组裸题,其实我在练习模板写对了没 代码: #include<cstdi ...
- htmlparser源码简单分析
Htmlparser源代码分析 一．根目录下的类 1.Attribute.java 属性类,四个field:mName,mAssignment,mValue,mQuote; 空白标签时:mName=n ...
- 在Eclipse中使用Github（EGit）
安装配置EGit 1. 安装Windows版的Git,登陆Github账号,登陆成功后会自动在本地和Github配置好密钥 2. 在Eclipse中安装EGit,地址http://download.e ...
- js打印的两种方法
第一种: <!--startprint1-->……打印的内容放在这里…… <!--endprint1--> //打印 function preview(DivID) { ) { ...
- 【转】RDO、SAD、SATD、λ
SAD(Sum of Absolute Difference)=SAE(Sum of Absolute Error)即绝对误差和 SATD(Sum of Absolute Transformed Di ...
- leecode 归并排序 链表(java)
写了好久,终于写成了.第一次zai leecode错题,题目质量很高,适合面试,与 1.归并排序是稳定的,在java中 Arrays.sort(a);中对于对象的排序就是归并排序.对于原子类型数据使用 ...