1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>lf</title>
  6.         <script type="text/javascript">
  7.             function selectAllOrNo(){
  8.  
  9.                 var choice = document.getElementById("choose");
  10.                 //根据对应的状态全选或全不选
  11.                 if(choice.checked==true){
  12.                     selectAll();
  13.                 }else{
  14.                     noSelect();
  15.                 }
  16.             }
  17.  
  18.             function selectAll(){
  19.                 var choice = document.getElementById("choose");
  20.                 choice.checked=true;
  21.  
  22.                 //获取interest的复选框
  23.                 var interests = document.getElementsByName("interest");
  24.                 // 遍历
  25.                 for(var i = 0; i<interests.length;i++){
  26.                     var interest = interests[i];
  27.                     interest.checked = true;
  28.                 }
  29.             }
  30.  
  31.             function noSelect(){
  32.                 var choice = document.getElementById("choose");
  33.                 choice.checked=false;
  34.                 //获取interest的复选框
  35.                 var interests = document.getElementsByName("interest");
  36.                 // 遍历
  37.                 for(var i = 0; i<interests.length;i++){
  38.                     var interest = interests[i];
  39.                     interest.checked = false;
  40.                 }
  41.             }
  42.  
  43.             function selectOther(){
  44.                 var choice = document.getElementById("choose");
  45.                 choice.checked=true;
  46.                 //获取interest的复选框
  47.                 var interests = document.getElementsByName("interest");
  48.                 // 遍历
  49.                 for(var i = 0; i<interests.length;i++){
  50.                     var interest = interests[i];
  51.                     interest.checked = !interest.checked;
  52.                     // 如果存在未选择，则设置全选/全不选为不选择状态
  53.                     checkSelect();
  54.                 }
  55.  
  56.             }
  57.             // 如果存在未选择，则设置全选/全不选为不选择状态
  58.             function checkSelect(){
  59.  
  60.                 var choice = document.getElementById("choose");
  61.                 choice.checked=true;
  62.                 //获取interest的复选框
  63.                 var interests = document.getElementsByName("interest");
  64.                 // 遍历
  65.                 for(var i = 0; i<interests.length;i++){
  66.                     var interest = interests[i];
  67.                     // 如果存在未选择，则设置全选/全不选为不选择状态
  68.                     if(interest.checked==false){
  69.                         choice.checked=false;
  70.                     }
  71.                 }
  72.             }
  73.     </script>
  74.     </head>
  75.     <body>
  76.           你爱好的运动是？
  77.         <input type="checkbox" id="choose" onclick="selectAllOrNo()"/>全选/全不选<br>
  78.  
  79.         <input type="checkbox" name="interest" value="足球" onchange="checkSelect()"/>足球
  80.         <input type="checkbox" name="interest" value="篮球"  onchange="checkSelect()"/>篮球
  81.         <input type="checkbox" name="interest" value="羽毛球"  onchange="checkSelect()"/>羽毛球
  82.         <input type="checkbox" name="interest" value="乒乓球"  onchange="checkSelect()"/>乒乓球
  83.         <br>
  84.          <input type="button" value="全选" onclick="selectAll();"/>
  85.          <input type="button" value="全不选" onclick="noSelect();"/>
  86.          <input type="button" value="反选" onclick="selectOther();"/>
  87.     </body>
  88. </html>

html 全选或全不选小案例的更多相关文章

  1. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  2. JS小案例--全选和全不选列表功能的实现

    纯js代码实现列表全选和全不选的功能 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  3. html table之 全选，全不选

    就是这个小功能让我和组长引发争端,就是这个小功能让我差点"被"辞职,就是这个自封装的js方法让我放下了对组长的敬畏之心,现在分享一下,其实也很简单,但是真的有这么简单吗? < ...

  4. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  5. ExtJS中，将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  6. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  7. CheckBox复选框全选以及获取值

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. jquery的checkbox 全选和全不选

    今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...

  9. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

随机推荐

  1. [转]Jquery通用开源框架之【ejq.js】

    ejq是一款非常小巧的JS工具库,未压缩才50K,在jquery的基础上对jquery缺失部分作了很好的弥补作用. 优点: 1.具有内置的模板解析引擎语法和angularjs相近减少学习成本 2.能够 ...

  2. [听点音乐]Mozart's 'The Marriage of Figaro'

    今天看到西雅图图书馆上写着可以到当地图书馆欣赏Mozart's 'The Marriage of Figaro'.查了一下,貌似还挺好看. “ Preview lecture of Seattle O ...

  3. Hadoop2 实战系列之1 -- Hortonworks Sandbox的安装和使用

    欢迎转载,转载请注明出处,谢谢,徽沪一郎. 概要 本文主要讲述如何利用hortonworks sanbox来搭建hadoop2的学习环境.Hortonworks sanbox集成了hadoop2及其上 ...

  4. PHP 错误与异常 笔记与总结（15 ）使用观察者模式处理异常信息

    使异常处理变得更灵活.可观察,可以使用设计模式中的观察者模式. 文件 ① 定义观察者的接口 ExceptionObserver.php: <?php /* 给观察者定义的规范 */ interf ...

  5. Web 在线文件管理器学习笔记与总结（5）修改文件内容

    ① 读出要修改的文件的内容 ② 进行修改 ③ 将修改后的内容写进文件 index.php: <?php require 'dir.func.php'; require 'file.func.ph ...

  6. PHP 常用函数库和一些实用小技巧

    PHP 常用函数库和一些实用小技巧 作者: 字体:[增加 减小] 类型:转载   包括文件读取函式,文件写入函式,静态页面生成函式,目录删除函式等   文件读取函式 //文件读取函式 function ...

  7. pointer

    https://en.wikipedia.org/wiki/Pointer_(computer_programming) In computer science, a pointer is a pro ...

  8. nginx php解析过慢

    nginx 报错 upstream timed out (110: Connection timed out)解决方案 error.log报错如下: 2013/05/18 21:21:36 [erro ...

  9. Java反射机制深入研究

    ava 反射是Java语言的一个很重要的特征,它使得Java具体了“动态性”.   在Java运行时环境中,对于任意一个类,能否知道这个类有哪些属性和方法?对于任意一个对象,能否调用它的任意一个方法? ...

  10. onmouseenter与onmouseover

    简单的说: mouseenter第一次进入这个元素的某个子元素时触发.一旦触发后,在mouseleave之前,鼠标在这个元素的子元素上触发mouseenter事件,不会触发这个元素的mouseente ...