<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<span style="font-size: 24px;">javascript 案例 全选 不选  反选</span><br />

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<title>全选 不选  反选</title>

	</head>

	<script>

window.onload=function (){  

   var oBtn1=document.getElementById("Btn1");

   var oBtn2=document.getElementById("Btn2");

   var oBtn3=document.getElementById("Btn3");

   var oDiv=document.getElementById("Ben");

   var oInp=oDiv.getElementsByTagName("input");  

   oBtn1.onclick=function(){     //全选

        //oInp[0].checked=true;   // checked ： 布尔值  false  true;

         for(var i=0; i<oInp.length ; i++){

         oInp[i].checked=true;

        }

   };

   oBtn2.onclick=function(){    //不选

        for(var i=0; i<oInp.length ; i++){

              oInp[i].checked=false;

        }

   };

   oBtn3.onclick=function(){    //反选

        for(var i=0; i<oInp.length ; i++){

            if(oInp[i].checked==true){  

                oInp[i].checked=false;

            }

            else{

                oInp[i].checked=true;

            }

        }

   };

};  

</script>

	<body>

	<input id="Btn1" type="button" value="全选" /><br />

    <input id="Btn2" type="button" value="不选" /><br />

    <input id="Btn3" type="button" value="反选" /><br />

    <div id="Ben">

<input type="checkbox"  /><br />

<input type="checkbox" /><br />  <!--复选框   checked  选中-->

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

<input type="checkbox" /><br />

</div>  

	</body>

</html>

　　

js---复选框（全选，不选，反选）demo1--的更多相关文章

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

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

  2. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  4. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  5. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  7. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  8. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  10. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. 我的Android进阶之旅------>Android基于HTTP协议的多线程断点下载器的实现

    一.首先写这篇文章之前,要了解实现该Android多线程断点下载器的几个知识点 1.多线程下载的原理,如下图所示 注意:由于Android移动设备和PC机的处理器还是不能相比,所以开辟的子线程建议不要 ...

  2. db2数据库还原

    1.建好数据库比如TEST,建的时候将codepage设为与目标备份的codepage一致,比如: 437  2.然后备份一下刚建好的数据库,备份成功后,将20141127目录删除,然后将原来备份好的 ...

  3. IONIC3 打包安卓apk详细过程（大量图文）

    经历三天的踩坑,跳坑,相信绝大多数的问题都已经覆盖到了,请仔细按照流程来对照操作及检查. 1.基本依赖环境 nodejs环境 (作为一个前端相信你已经有了)  最好提前配置好node的环境变量,便于全 ...

  4. Oracle分页总汇

    Oracle分页总汇 select * from (select a.*,rownum row_num from (select * from mytable t order by t.id desc ...

  5. Data Structure Binary Tree: Connect nodes at same level using constant extra space

    http://www.geeksforgeeks.org/connect-nodes-at-same-level-with-o1-extra-space/ recursive: #include &l ...

  6. 《程序员代码面试指南》第二章 链表问题 在单链表和双链表中删除倒数第K个节点

    题目 在单链表和双链表中删除倒数第K个节点 java代码 /** * @Description:在单链表和双链表中删除倒数第K个节点 * @Author: lizhouwei * @CreateDat ...

  7. [原创]java WEB学习笔记33：Session 案例 之 购物车

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. 【转】Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式

    [转]Struts2的线程安全 和Struts2中的设计模式----ThreadLocal模式 博客分类: 企业应用面临的问题 java并发编程 Struts2的线程安全ThreadLocal模式St ...

  9. PHP面试题，自己几斤几两，看看就知道了

    0.简单做一下自我介绍,? 然后谈一下近三年来你的得意之作? 1.面试官看过你的简历,会问一些你做的项目的用户量.pv.吞吐量.相关难点和解决方法等 2.数据库设计经验,为什么进行分表? 分库? 一般 ...

  10. BEC listen and translation exercise 39

    What about jigsaw puzzle design for visually handicapped?给视觉障碍人士设计拼图怎么样? Length is 50cm, and then th ...