<!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. iBatis 简单介绍及基础入门

    iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2002年发起的开放源代码项目.于2010年6月16号被谷歌托管,改名为MyBatis.是一个基 ...

  2. 4django模板

    在前面的几节中我们都是用简单的django.http.HttpResponse来把内容显示到网页上,本节将讲解如何使用渲染模板的方法来显示内容 1.创建一个 zqxt_tmpl 项目,和一个 名称为 ...

  3. javascript常见的20个问题与解决方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用Java实现断点续传的基本思路和代码

    用Java实现断点续传的基本思路和代码   URL url = new URL(http://www.oschina.net/no-exist.zip); HttpURLConnection http ...

  5. 每天一个Linux命令（2）cd命令

    cd命令用来切换工作目录至dirname. 其中dirName表示法可为绝对路径或相对路径.若目录名称省略,则变换至使用者的home directory(也就是刚login时所在的目录).另外,~也表 ...

  6. 通过tile和url判断页面跳转是否正确

    通过webdriver中的.title和.current_url获取title和url from time import sleep from selenium import webdriver br ...

  7. Alembic Migrations

    Introduction The migrations in the alembic/versions contain the changes needed to migrate from older ...

  8. jQuery Cloud Zoom：图片放大镜插件 破解插件

    /* Cloud Zoom 10 Site License (CZ01-10). Version 3.1 rev 1312051822 */ (function(e) { function s(a) ...

  9. QFileInfo与QFileIconProvider(分别用于获取文件信息和获取文件的图标)

    判断文件是否存在,获取文件名称,绝对路径,修改时间等等信息 fileInfo = Qt.QFileInfo(filename) fileIcon = Qt.QFileIconProvider() ic ...

  10. C++ 值传递、址传递、引用传递

    一.值传递   int func(int p) 值传递会在栈中开辟一块空间 p,使得p和实参的a 同值. 此时你在函数func里面对p进行任何操作都不会对原值a产生任何影响.因为a 和p本就就是两个变 ...