JavaScript---网络编程(10)--DHTML技术演示(3)-多选框
这节讲述多选框的使用，当然，肯定是结合css和Javascript一起的。
checkbox的使用1：
演示代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DHTML技术演示---checkbox的使用1</title>
<script type="text/javascript">
//html中<pre></pre>让代码原样输出-小提示
function getSum(){
var sum=0;
var arrChkNode = document.getElementsByName("item");
for(var x=0;x<arrChkNode.length;x++){
if(arrChkNode[x].checked){
sum+=parseInt(arrChkNode[x].value);
}
}
var sVal = sum+"元";
//字体颜色设置为红色
//document.getElementById("sumid").innerHTML="<font color='red'>aaa</font>";
document.getElementById("sumid").innerHTML=sVal.fontcolor("red");
}
function checkAll(aChkAllNode){
var arrChkNodes = document.getElementsByName("item");
for(var x=0;x<arrChkNodes.length;x++){
//arrChkNodes[x].checked=true;//"true"也可以，但不建议这样使用，因为API中要求的是boolean类型
arrChkNodes[x].checked= aChkAllNode.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="item" value="8000"/>空调:8000元<br/>
<input type="checkbox" name="item" value="160"/>风扇:160元<br/>
<input type="checkbox" name="item" value="4500"/>电脑:4500元<br/>
<input type="checkbox" name="item" value="5000"/>投影仪:5000元<br/>
<input type="checkbox" onclick="checkAll(this)"/>全选<br/>
<input type="button" value="总金额是：" onclick="getSum()"><span id="sumid"> </span>
</body>
</html>
360浏览器8.1 演示结果:
checkbox的使用2：
仿邮件选择的方式做多选框
table.css:
table{
border:#ff80ff 1px solid;
/*solid : 实线边框 */
width:800px;
border-collapse:collapse;
/*separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
*/
}
table td{/*table 下面的td*/
border:#0000ff 1px solid;
padding:5px;/*内补丁*/
}
table th{
border:#ff80ff 1px solid;
padding:5px;
background-color:#c0c0c0;
}
.one{
background-color:#80ff00;
}
.two{
background-color:#ff80ff;
}
.over{
background-color:#ffff00;
}
第一种方式：
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DHTML技术演示---checkbox的使用2</title>
<style type="text/css">
@import url(table.css);
</style>
<script type="text/javascript">
var name;
function trColor(){
var oTableNode = document.getElementById("mailTable");
var collTrNodes = oTableNode.rows;//得到表格的所有行对象-返回数组
for(var x=1; x<collTrNodes.length;x++ ){
if(x%2==1){
collTrNodes[x].className="one";
}else{
collTrNodes[x].className="two";
}
collTrNodes[x].onmouseover=function(){
name=this.className;
this.className="over";
/*下面这种注册事件的方式也可以
this.onmouseout=function(){
this.className=name;
}
*/
}
collTrNodes[x].onmouseout=function(){
this.className=name;
}
}
}
onload = function(){
trColor();
}
function checkAll(aChkboxNode){
var collChkboxAllNodes = document.getElementsByName("all");
//取消部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
var collMailNodes = document.getElementsByName("mail");
for(var x=0;x<collMailNodes.length;x++){
collMailNodes[x].checked = aChkboxNode.checked;
}
collChkboxAllNodes[0].checked = aChkboxNode.checked;
collChkboxAllNodes[1].checked = aChkboxNode.checked;
}
function checkAllByBtn1(flag){
var collMailNodes = document.getElementsByName("mail");
for(var x=0;x<collMailNodes.length;x++){
collMailNodes[x].checked = flag;
}
var collChkboxAllNodes = document.getElementsByName("all");
collChkboxAllNodes[0].checked = flag;
collChkboxAllNodes[1].checked = flag;
//取消部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
}
function checkAllByBtn2(){
var collMailNodes = document.getElementsByName("mail");
var n=0;
for(var x=0;x<collMailNodes.length;x++ ){
collMailNodes[x].checked = !collMailNodes[x].checked;
if( collMailNodes[x].checked ){
n++;
}
}
var collChkboxAllNodes = document.getElementsByName("all");
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
if(n==0){
collChkboxAllNodes[0].checked = false;
collChkboxAllNodes[1].checked = false;
}else if(n==collMailNodes.length){
collChkboxAllNodes[0].checked = true;
collChkboxAllNodes[1].checked = true;
}else{//部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=true;
collChkboxAllNodes[1].indeterminate=true;
}
}
function deleteMail(){
if(!confirm("你真的要删除所选邮件吗？")){//弹出确认对话框
return;
}
//获取所有的邮件
var collMailChkNodes = document.getElementsByName("mail");
for(var x=0;x<collMailChkNodes.length;x++){
if (collMailChkNodes[x].checked) {//选中，则删除
//先拿到tr对象
var oTrNode = collMailChkNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
//bug:节点容器中，remove之后，长度会变。
x--;//长度修正--还有一种解决方案是：从后往前删
}
}
trColor();
}
</script>
</head>
<body>
<h2>邮件列表</h2>
<table id="mailTable">
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</th>
<th>发件人</th> <th>邮件标题</th> <th>时间</th>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="all" onClick="checkAll(this)"/>全选</td>
<td colspan="3">
<!--colspan=3-表示这一列占3列 -->
<input type="button" value="全选" onclick="checkAllByBtn1(true)">
<input type="button" value="取消全选" onclick="checkAllByBtn1(false)">
<input type="button" value="反选" onclick="checkAllByBtn2()">
<input type="button" value="删除所选邮件" onClick="deleteMail()">
</td>
</tr>
</table>
</body>
</html>
第二中方式：把2个方法合并为一个方法：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DHTML技术演示---checkbox的使用2</title>
<style type="text/css">
@import url(table.css);
</style>
<script type="text/javascript">
var name;
function trColor(){
var oTableNode = document.getElementById("mailTable");
var collTrNodes = oTableNode.rows;//得到表格的所有行对象-返回数组
for(var x=1; x<collTrNodes.length;x++ ){
if(x%2==1){
collTrNodes[x].className="one";
}else{
collTrNodes[x].className="two";
}
collTrNodes[x].onmouseover=function(){
name=this.className;
this.className="over";
/*下面这种注册事件的方式也可以
this.onmouseout=function(){
this.className=name;
}
*/
}
collTrNodes[x].onmouseout=function(){
this.className=name;
}
}
}
onload = function(){
trColor();
}
function checkAll(aChkboxNode){
var collChkboxAllNodes = document.getElementsByName("all");
//取消部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
var collMailNodes = document.getElementsByName("mail");
for(var x=0;x<collMailNodes.length;x++){
collMailNodes[x].checked = aChkboxNode.checked;
}
collChkboxAllNodes[0].checked = aChkboxNode.checked;
collChkboxAllNodes[1].checked = aChkboxNode.checked;
}
//合并的方法：
function checkAllByBtn(num){
//获得邮件的所有多选框对象
var collMailNodes = document.getElementsByName("mail");
var collChkboxAllNodes = document.getElementsByName("all");//获得那2个全选的多选框
//取消部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=false;
collChkboxAllNodes[1].indeterminate=false;
var n=0;
//遍历所有的邮件多选框
for(var x=0;x<collMailNodes.length;x++){
if(num>1){//反选
collMailNodes[x].checked = !collMailNodes[x].checked;
}else{
collMailNodes[x].checked = num;
}
if(collMailNodes[x].checked){
n++;
}
}
if(n==0){
collChkboxAllNodes[0].checked = false;
collChkboxAllNodes[1].checked = false;
}else if(n==collMailNodes.length){
collChkboxAllNodes[0].checked = true;
collChkboxAllNodes[1].checked = true;
}else{//部分选中时的显示样式
collChkboxAllNodes[0].indeterminate=true;
collChkboxAllNodes[1].indeterminate=true;
}
}
function deleteMail(){
if(!confirm("你真的要删除所选邮件吗？")){//弹出确认对话框
return;
}
//获取所有的邮件
var collMailChkNodes = document.getElementsByName("mail");
for(var x=0;x<collMailChkNodes.length;x++){
if (collMailChkNodes[x].checked) {//选中，则删除
//先拿到tr对象
var oTrNode = collMailChkNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
//bug:节点容器中，remove之后，长度会变。
x--;//长度修正--还有一种解决方案是：从后往前删
}
}
trColor();
}
</script>
</head>
<body>
<h2>邮件列表</h2>
<table id="mailTable">
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</th>
<th>发件人</th> <th>邮件标题</th> <th>时间</th>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三</td> <td>邮件标题11</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>李四</td> <td>邮件标题22</td> <td>2016年6月15日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张四</td> <td>邮件标题33</td> <td>2016年6月14日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>Jack</td> <td>邮件标题44</td> <td>2016年6月18日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>Rose</td> <td>邮件标题55</td> <td>2016年6月25日</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张六</td> <td>邮件标题66</td> <td>2016年6月16日</td>
</tr>
<tr>
<td><input type="checkbox" name="all" onClick="checkAll(this)"/>全选</td>
<td colspan="3">
<!--colspan=3-表示这一列占3列 -->
<input type="button" value="全选" onClick="checkAllByBtn(1)">
<input type="button" value="取消全选" onClick="checkAllByBtn(0)">
<input type="button" value="反选" onClick="checkAllByBtn(2)">
<input type="button" value="删除所选邮件" onClick="deleteMail()">
</td>
</tr>
</table>
</body>
</html>
360浏览器8.1演示结果：
JavaScript---网络编程(10)--DHTML技术演示(3)-多选框的更多相关文章
- JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强
对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页 ...
- JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该 ...
- JavaScript---网络编程(8)-DHTML技术演示(1)
DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...
- 10个HTML5美化版复选框和单选框
单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...
- Linux网络编程10——使用UDP实现五子棋对战
思路 1. 通信 为了同步双方的棋盘,每当一方在棋盘上落子之后,都需要发送给对方一个msg消息,让对方知道落子位置.msg结构体如下: /* 用于发给对方的信息 */ typedef struct t ...
- Linux网络编程-IO复用技术
IO复用是Linux中的IO模型之一,IO复用就是进程预先告诉内核需要监视的IO条件,使得内核一旦发现进程指定的一个或多个IO条件就绪,就通过进程进程处理,从而不会在单个IO上阻塞了.Linux中,提 ...
- Socket网络编程TCP、UDP演示样例
Socket网络编程: 1) OSI(了解): 国际标准化组织ISO(International Orgnization for Standardization)指定了网络通信的模型:开放系统互联(O ...
随机推荐
- 学习基于OpenGL的CAD程序的开发计划（一）
本人目前从事的工作面对的客户中很多来自高端制造业,他们对CAD/CAE/CAM软件的应用比较多.公司现有的软件产品主要是用于渲染展示及交互,但面对诸如CAD方面的应用(比如基于约束的装配.制造工艺的流 ...
- CentOS系统Apache服务器优化详解
1.Apache优化 Apache能够在CentOS系统正常运行.但是,对于访问量稍大的站点,Apache的这些默认配置是无法满足需求的,我们仍需调整Apache的一些参数,使Apache能够在大访问 ...
- vim 配置文件 ，高亮+自动缩进+行号+折叠+优化
vim 配置文件 ,高亮+自动缩进+行号+折叠+优化 将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效: 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)& ...
- HTML5基础知识（一）---标签
在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记. 我们将创建一个简单的Web页面,该页面包含一个Header区.一个Navigation区.一个Article区(包含三个部分 ...
- Android Context创建过程
特定的资源或者类构成了Android应用程序的运行上下文环境 PackageManager, ClassLoader, Assert等等 Android应用程序窗口的运行上下文环境是通过Con ...
- word 2013 没有控件菜单怎么办，添加控件菜单
方法/步骤 打开word软件,然后点击菜单栏中最左边的“文件”菜单项,如下图红色方框所示 2 点击文件后,就打开word的设置对话框,然后在左边的设置列表中点击“自定义功能区”,打开自定义功能区设 ...
- tomcat https 配置
以前基本上笔者对于安全性考虑的并不多,最近因为saas平台要开始逐渐推广,所以需要开始逐渐加强xss/crsf/https等措施以避免潜在的安全性风险.本文简单的记录下tomcat下https的配置. ...
- 使用自定义《UIActivity》进行内容分享－b
简介 这段时间有很多朋友都问我关于怎么去集成ShareSDK或者友盟社会化分享SDK的问题, 其实我想说, Apple一开始就提供了一个类, 供我们去使用分享了, 在iOS 6之后更加增强了这个类, ...
- BZOJ 1711: [Usaco2007 Open]Dingin吃饭
Description 农夫JOHN为牛们做了很好的食品,但是牛吃饭很挑食. 每一头牛只喜欢吃一些食品和饮料而别的一概不吃.虽然他不一定能把所有牛喂饱,他还是想让尽可能多的牛吃到他们喜欢的食品和饮料. ...
- BZOJ 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路
Description 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一 张藏宝图上说,如果他的路程上经过的小岛依次出 ...