<!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. Jquery禁用所有checkbox

    $("input[type=checkbox]").each(function(){ $(this).attr("disabled",false);});

  2. jauery table

    $("#tableData tr:gt(0)").each(function() { }//橘色部分是查找id为tableData的DataTable里面除第一行以外的行

  3. html_dom类读取

    上传类文件以后,有三种方式调用这个类:从url中加载html文档从字符串中加载html文档从文件中加载html文档 复制代码 代码如下: <?php// 新建一个Dom实例$html = new ...

  4. python学习-4-类的使用

    class Animal: def __init__(self, name): # Constructor of the class self.name = name def talk(self): ...

  5. 谷歌浏览器chrome上的firepath ----chropath

    图标如下 功能:获取相对xpath,绝对xpath和CSS选择器.在devtools面板中编辑,检查并验证XPath和CSS选择器. 使用方法

  6. selenium之坑（StaleElementReferenceException: Message: Element not found in the cache...）

    有时候循环点击一列链接,只能点到第一个,第二个就失败了 原因是第二个已经是新页面,当然找不到之前页面的元素.就算是后退回来的,页面也是不一样的 页面长的一样不一定是同一张页面,就像两个人长的一样不一定 ...

  7. IImage--factory

    <?php /* 实例4 */ /* 使用工厂类解析图像工作 */ interface IImage { function getWidth(); function getHeight(); f ...

  8. Oracle数据库体系结构（1）整体概述

    oracle数据库的存储结构: 逻辑存储结构:oracle内部的组织和管理数据的方式 物理存储结构:oracle外部(操作系统)组织和管理数据的方式 oracle对逻辑存储结构和物理存储结构的管理是分 ...

  9. my.cnf重要配置参数说明

    不同存储引擎中关键参数优化 MyISAM存储引擎 MyISAM存储引擎适用于读多写少,对读性能要求比较高的系统 官方文档:http://dev.mysql.com/doc/refman/5.6/en/ ...

  10. App开发流程之iOS开发证书拾遗

    很久没有总结,回头看了一下过期的账号,记录的内容少之又少.最近有一些时间,想好好总结记录一下. 由于很久没有记录,想写的东西很多又很杂,想了一下,一篇一篇罗列知识点和经验,还不如写一个系列,记录一个应 ...