为什么80%的码农都做不了架构师？>>>   

简单实例一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>JavaScript全选/全不选/反选操作</title>
</head>
<body>
<ul><li><input type="checkbox" name="like" value="1" />看电影</li><li><input type="checkbox" name="like" value="2" />玩游戏</li><li><input type="checkbox" name="like" value="3" />看小说</li><li><input type="checkbox" name="like" value="4" />读书</li><li><input type="checkbox" name="like" value="5" />运动</li><li><button onclick="doSelect(1);">全选</button><button onclick="doSelect(0);">全不选</button><button onclick="doSelect(2);">反选</button></li>
</ul>
<script type="text/javascript">
function doSelect(e){// 获取页面中所有的inputvar input = document.getElementsByTagName("input");// 循环for(var i = 0;i < input.length;i++){switch(e){case 1:   // 全选input[i].checked = true;  // checked是checkbox对象的一个属性break;case 0:   // 全不选input[i].checked = false;break;case 2:   // 反选input[i].checked = !input[i].checked;break;}}
}
</script>
</body>
</html>

简单实例二：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>JavaScript全选/全不选/反选操作</title>
</head>
<body>
<input type="checkbox" id="selectAll" />全选
<input type="checkbox" id="selectNone" />全不选
<input type="checkbox" id="selectOther" />反选
<form name="myForm">
<input type="checkbox" name="like" value="1" />看电影 <br />
<input type="checkbox" name="like" value="2" />玩游戏 <br />
<input type="checkbox" name="like" value="3" />看小说 <br />
<input type="checkbox" name="like" value="4" />读书 <br />
<input type="checkbox" name="like" value="5" />运动 <br />
</form>
<script type="text/javascript">
// 获取三个选择按钮
var all   = document.getElementById("selectAll");
var none  = document.getElementById("selectNone");
var other = document.getElementById("selectOther");
// 获取表单中的复选框
var list = document.myForm.like;
function doSelect(e){for(var i = 0; i<list.length;i++){switch(e){case 1:list[i].checked = true;break;case 0:list[i].checked = false;break;case 2:list[i].checked = !list[i].checked;break;}}
}
all.onclick = function(){if(all.checked){// 取消另外两个的选择状态none.checked  = false;other.checked = false;doSelect(1);} else {doSelect(0);}
}
none.onclick = function(){if(none.checked){// 取消另外两个的选择状态all.checked  = false;other.checked = false;doSelect(0);} else {doSelect(0);}
}
other.onclick = function(){if(other.checked){// 取消另外两个的选择状态none.checked  = false;all.checked = false;doSelect(2);} else {doSelect(2);}
}
</script>
</body>
</html>

简单实例三：综合上面两个进行优化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>JavaScript全选/全不选/反选操作</title>
</head>
<body>
<div id="select"><input type="checkbox" onclick="doSelect(1,this);" />全选<input type="checkbox" onclick="doSelect(0,this);" />全不选<input type="checkbox" onclick="doSelect(2,this);" />反选
</div>
<form name="myForm"><input type="checkbox" name="like" value="1" />看电影 <br /><input type="checkbox" name="like" value="2" />玩游戏 <br /><input type="checkbox" name="like" value="3" />看小说 <br /><input type="checkbox" name="like" value="4" />读书 <br /><input type="checkbox" name="like" value="5" />运动 <br />
</form>
<script type="text/javascript">
function doSelect(e,t){var s = document.getElementById('select').getElementsByTagName("input");for(var i = 0; i<s.length;i++){s[i].checked = false;}t.checked = true;// 获取表单中的复选框var list = document.myForm.like;for(var i = 0; i<list.length;i++){switch(e){case 1:list[i].checked = true;break;case 0:list[i].checked = false;break;case 2:list[i].checked = !list[i].checked;break;}}
}
</script>
</body>
</html>

转载于:https://my.oschina.net/mpf/blog/527325

JavaScript函数实例(一)相关推荐

  1. JavaScript --函数 (实例结合)

    JavaScript --函数 (实例结合) 文章目录 JavaScript --函数 (实例结合) 1.初识函数 2.参数设置 3.函数的调用 [案例]字符串大小写转换 4.变量的作用域 5.匿名函 ...

  2. 深入理解javascript函数系列第二篇——函数参数

    前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数.本文是深入理解javascript函数 ...

  3. 怎样在javascript函数中将变量传递给服务端脚本程序?

    怎样在javascript函数中将变量传递给服务端脚本程序? (有朋友问上述问题, 愿把结论分享给大家). 摘 要:   服务器端脚本运行时, 它只会解释执行<% %>或<?php ...

  4. Javascript函数执行、new机制以及继承

    JS函数执行 一个JavaScript函数fn,被执行有三种途径: fn() new fn() fn.call()或fn.apply() new机制以及继承 JavaScript中定义了一种对象,称之 ...

  5. Javascript函数的简单学习

    第九课 函数的定义与调用 1:函数的定义     语法格式     function 函数名(数据类型 参数1){//function是定义函数的关键字         方法体;//statement ...

  6. 一张图说明 函数, 实例(对象), 原型之间的关系

    前言 很多初学者都对函数,实例(对象), 原型之间的关系理不清楚. 网上五花八门的文章很多,要么不知所云,要么是晦涩难懂. 本文意在用最简洁的语言跟示例让初学者理清楚这三者之间的关系,无需理会其内部原 ...

  7. JavaScript 函数声明，函数表达式，匿名函数，立即执行函数之区别

    函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...

  8. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

  9. 第一百零二节，JavaScript函数

    JavaScript函数 学习要点: 1.函数声明 2.return返回值 3.arguments对象 函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值 ...

  10. JavaScript 函数参数

    JavaScript 函数参数 JavaScript 函数对参数的值没有进行任何的检查. 函数显式参数(Parameters)与隐式参数(Arguments) functionName(paramet ...

最新文章

  1. 【NetApp】IO读写和WAFL的工作原理
  2. cxf和spring整合
  3. NodeJS中的require和import
  4. 实现Mybatis接口模式下的数据库调用分离
  5. Nonebot部署机器人常见问题
  6. 关于学习单片机keil uvision5的基本使用方法
  7. 基于3D人像复原技术的试衣平台
  8. ndows优化大师 免费版,Windows优化大师
  9. 【优化系列】VS与YASM的集成使用
  10. [原]终于有新机器用了Intel E6500K+4G+23.6’液晶
  11. OJ 1038 宋小胖买切糕
  12. 工程伦理（2021春）第四章课后习题答案
  13. 双软企业的税收优惠政策
  14. eplan部件列表手动修改_EPLAN的批量修改功能
  15. stm32实现串口通信
  16. c语言找出链表中倒数第k的数,查找链表中倒数第k个结点
  17. 微派微营销智能服务平台：微信营销最佳搭档
  18. 前端--video大视频播放（m3u8）
  19. VMWare Player设置双屏显示
  20. CSS(Cascading Style Sheets) 层叠样式表

热门文章

  1. Atitit.互联网 软件编程 数据库方面 架构 大牛 牛人 attilax总结
  2. Atitit. 软件设计 模式 变量 方法 命名最佳实践 vp820 attilax总结命名表大全
  3. paip.java 架构师之路以及java高级技术
  4. 亚马逊：贝佐斯没有闹钟
  5. OCI 完成 TOB 选举，阿里工程师入选全球 9 人名单
  6. ZStack CMP多云管理平台有何不同？
  7. c语言编程简单好玩的图,几个有趣的画图编程
  8. 【TSP】基于matlab GUI遗传算法求解旅行商问题【含Matlab源码 1333期】
  9. 【三维装箱】基于matlab求解三维装箱优化问题【含Matlab源码 949期】
  10. 【VRP】基于matlab改进的模拟退火和遗传算法求解车辆路径规划问题【含Matlab源码 343期】