<!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. MySQL级联删除的问题

    一.FOREIGN KEY 的定义分为两种:列级约束和表级约束 .列及约束的话,可以在列定义的同时,定义外键约束.比如 如果有2张表,主表:T1(A1 )) 要在从表T2中定义外键列这可以: Crea ...

  2. ObCallback回调钩子检测

    ObCallback回调钩子检测 2013-12-20 Nie.Meining Ring0 在 PatchGuard 的摧残下,通过 ObRegisterCallbacks 函数注册回调钩子已经成了 ...

  3. ontouchstart

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. Android：res之shape制作圆角、虚线、渐变

    xml控件配置属性 android:background="@drawable/shape" 标签 corners ----------圆角gradient ----------渐 ...

  5. nginx日志中文变成类型\xE9\xA6\x96\xE9\xA1\xB5-\xE6\x8E\xA8\xE8\x8D\x90的东西

    感谢 http://my.oschina.net/leejun2005/blog/106791 代码如下: public class App { public static String str2He ...

  6. ASP.Net MVC开发基础学习笔记（4）：校验、AJAX与过滤器

    一.校验 — 表单不是你想提想提就能提 1.1 DataAnnotations(数据注解) 位于 System.ComponentModel.DataAnnotations 命名空间中的特性指定对数据 ...

  7. jQuery插件开发--（转）

    1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

  8. DSP using MATLAB示例Example3.6

    代码: n = [-5:5]; x = (-0.9).^n; % x(n) = k = -200:200; w = (pi/100)*k; % [0,pi] axis divided into 101 ...

  9. js-DOM2，表单脚本

    DOM2: 1.DOM2中:创建一个完整的HTML文档 document.implementation.createHTMLDocument("new Doc"); alert(h ...

  10. 软件打开时间、窗体透明度、背景色---《用delphi开发共享软件》-15.1任务管理器

    1.计算软件启动了多长时间:用定时器,每分钟触发一次: procedure TFrmMain.tmCheckLegalTimer(Sender: TObject);Var Minutes:LongIn ...