<!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. LATEX ——WinEdt 破解

    WinEdt 是目前我发现最好的LaTeX编辑器,但是在国内支付不便,且学生许可需$40,只能出此下策,望有余力者尽量购买正版. WinEdt 的旧版本的破解方法众所周知,只需定时删除HKCU\Sof ...

  2. JVM性能优化， Part 5 Java的伸缩性

    很多程序员在解决JVM性能问题的时候,花开了很多时间去调优应用程序级别的性能瓶颈,当你读完这本系列文章之后你会发现我可能更加系统地看待这类的问题.我说过JVM的自身技术限制了Java企业级应用的伸缩性 ...

  3. VS2015 下载 破解

    Visual Studio Professional 2015简体中文版(专业版): http://download.microsoft.com/download/B/8/9/B898E46E-CBA ...

  4. spring mvc入门教程 转载自【http://elf8848.iteye.com/blog/875830】

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  5. mysql高可用研究(二) 主从+MHA+Atlas

    关于Atlas的详细介绍请访问:https://github.com/Qihoo360/Atlas/blob/master/README_ZH.md 为什么要使用Atlas?应用程序直连数据库不好吗? ...

  6. Ubuntu15.10下***搭建及GUI客户端安装

    1.依赖包安装 sudo apt-get install python-pip python-dev build-essential sudo pip install pip sudo apt-get ...

  7. Ubuntu 16.04 NFS搭建

    NFS服务器配置: 1.安装NFS相关包 apt-get install nfs-kernel-server nfs-common # centos 7# yum install nfs-utils ...

  8. LINQ 学习路程 -- 查询操作 ElementAt, ElementAtOrDefault

    Element Operators (Methods) Description ElementAt 返回指定索引的元素,如果索引超过集合长度,则抛出异常 ElementAtOrDefault 返回指定 ...

  9. Codeforces Round #260 (Div. 2) A , B , C 标记，找规律 ， dp

    A. Laptops time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  10. tkinter窗口系列之一——列表框

    以下内容来自https://tkdocs.com/tutorial/morewidgets.html 一个列表框显示由单行文本所组成的一栏条目,通常它很冗长,它允许使用者通过列表浏览其中的内容,选择一 ...