<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="" />

<meta name="copyright" content="" />

<title></title>

<style>

*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}

#div1{border-top:#333 10px solid;}

</style>

<script>

window.onload=function(){

    var oBtn=document.getElementById('btn1');

    var oBtn2=document.getElementById('btn2');

    var oBtn3=document.getElementById('btn3');

    var oDiv=document.getElementById('div1');

    var aIpt=oDiv.getElementsByTagName('input');

    //全选

    oBtn.onclick=function(){

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

            aIpt[i].checked=true;

        }

    };

    //不选

    oBtn2.onclick=function(){

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

            aIpt[i].checked=false;

        }

    };

    //反选

    oBtn3.onclick=function(){

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

            aIpt[i].checked=!aIpt[i].checked;

        }

    };

};

</script>

</head>

<body>

<input type="button" value="全选" id="btn1">

<input type="button" value="不选" id="btn2">

<input type="button" value="反选" id="btn3">

<div id="div1">

    <input type="checkbox" checked="true"><br>

    <input type="checkbox"><br>

    <input type="checkbox"><br>

    <input type="checkbox"><br>

    <input type="checkbox"><br>

</div>

</body>

</html>

全选，不选，反选js的更多相关文章

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

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

  2. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

  3. 原生js实现在表格用鼠标框选并有反选功能

    今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...

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

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

  5. JS实现页面table鼠标移动改变tr行颜色，单击tr选中复选框功能

    JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...

  6. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  7. WPF: 实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图:     这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都 ...

  8. QTableWidget自定义表头QHeaderView加全选复选框

    1         QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...

  9. WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中“全选”时,列表中所有的项目都会被选中 ...

  10. jQuery实现获取选中复选框的值

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Jq ...

随机推荐

  1. 全面解析windows下Memcache技术应用

    原文  http://www.cnblogs.com/liuqin520/p/4615644.html   一.Memcache介绍 Memcache 是 danga.com 的一个项目,最早是为 L ...

  2. SQL作业的操作全

    --定义创建作业 转自http://hi.baidu.com/procedure/blog/item/7f959fb10d76f95d092302dd.html DECLARE @jobid uniq ...

  3. 遭遇OutOfMemoryError

    这几天,网店系统基础架构进行了一次大的升级,升级之后例行的进行了压力测试,以前几次大的项目发布压力测试都没有任何问题,没想到这次出事故啦,而且是内存泄露? 系统运行环境:硬件:Intel(R) Xeo ...

  4. free store VS heap（自由存储区VS堆）

    1. free store VS heap free store (自由存储区)和 heap (堆),在C/C++中经常会遇到.他们是否有区别呢? 偶最早发现这两个概念性问题是在<Excepti ...

  5. 判断App是否在后台运行

    在一些场景中,经常会需要判断App是否在后台运行,比如是否显示解锁界面,收到新消息是否显示Notification等.需求可能是多样化的,但所依仗的原理是相通的,今天Stay打算说说这些需求的最优解. ...

  6. 比较全的JS checkbox全选、取消全选、删除功能代码

    看下面两种实现方法: JS checkbox 方法一: 复制代码 代码如下: function checkAll() { var code_Values = document.all['code_Va ...

  7. sql 、linq、lambda 总结

    LINQ的书写格式如下: from 临时变量 in 集合对象或数据库对象 where 条件表达式 [order by条件] select 临时变量中被查询的值 [group by 条件] Lambda ...

  8. BZOJ4605 : 崂山白花蛇草水

    外层维护权值线段树,内层维护kd-tree. 修改的时候只往右儿子里插入,不平衡的时候替罪羊式重构. 查询的时候在外层线段树上走,在内层kd-tree上查询矩形内点数即可. 时间复杂度$O(q\log ...

  9. 如何在2016年成为一个更好的Node.js开发者

    本文主要讨论一些进行Node.js开发的最佳实践和建议,这些建议不仅仅适合开发者,还适合那些管理与维护Node.js基础架构的工作人员.遵循本文提供的这些建议,能够让你更好的进行日常的开发工作. St ...

  10. 使用Percona Toolkit解决Mysql主从不同步问题【备忘】

    由于各种原因,mysql主从架构经常会出现数据不一致的情况出现,大致归结为如下几类 1:备库写数据 2:执行non-deterministic query 3:回滚掺杂事务表和非事务表的事务 4:bi ...