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 ...
随机推荐
- C语言动态内存管理
1-概述 动态存储管理的基本问题是:系统如何按请求分配内存,如何回收内存再利用.提出请求的用户可能是系统的一个作业,也可能是程序中的一个变量. 空闲块 未曾分配的地址连续的内存区称为“空闲块”. 占用 ...
- 【PythonChallenge】Level 5
题目主要找发声类似于Peak Hell的Python模块,查了一下手册pickle已经是最像的了.看了一下源代码,发现panner.p.如同发现了新大陆,拷贝内容.使用pickle解答.答案为chan ...
- vim多标签,多窗口
多标签 进入vim前 vim -p <文件名> 以多标签形式打开文件.如vim -p * 就是编辑当前目录的所有文件, vim编辑中 :tabnew 增加一个标签 :tabc 关闭当前的t ...
- WPF——文本随滚动条改变而改变
一.造一个窗体,拖进一个文本框TextBox和滚动条Slider 二.让文本框的内容随滚动条的滚动而改变,即文本框绑定到滚动条上 三.实现效果
- poj 1184 广搜进阶题
起初的想法果然就是一个6000000的状态的表示. 但是后面觉得还是太过于幼稚了. 可以看看网上的解释,其实就是先转换位置,然后再改变数字的大小. #include<iostream> # ...
- 分享你最喜欢的技巧和提示(Xcode,Objective-C,Swift,C...等等)
http://www.cocoachina.com/ios/20151231/14846.html 笔者分享总结如下(本篇会不定期进行更新) : Objective-C 1.让Xcode的控制台支持L ...
- ora-01589
今天遇到了ORA-01589这个错误,下面把解决方案记录如下: SQL*Plus: Release 9.2.0.1.0 - Production on 星期四 4月 17 15:01:26 2008C ...
- chrome的timeline的问题?
如图:Stalled.RequestSent等所表达的是什么意思呢? Stalled是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不 ...
- Android What is Application
本文转自:http://www.cnblogs.com/elleniou/archive/2012/05/16/2502661.html Application和Activity,Service一样是 ...
- dev combobox edit 怎么设置让选项清空
dev combobox edit 怎么设置让选项清空 功能需求: 点击combobox edit1的选项A 使得 combobox edit2出现选项a: 然后再点击combobox edit1的选 ...