<!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. Javascript 学习之路：鼠标长按事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 智能车学习(十六)——CCD学习

    一.使用硬件 1.兰宙CCD四代      优点:可以调节运放来改变放大倍数      缺点:使用软排线(容易坏),CCD容易起灰,需要多次调节   2.野火K60底层     二.CCD硬件电路 ( ...

  3. Atom 和 markdown 基本使用

    Atom 和 markdown 基本使用 Atom 常用的快捷键 Cmd + Shift + P 打开命令窗口,可以运行各种菜单功能. Cmd + T 快速的多文件切换 Ctrl + G 文件内跳转到 ...

  4. -webkit-text-size-adjust

    ios使用-webkit-text-size-adjust禁止调整字体大小 body{-webkit-text-size-adjust: 100%!important;} android使用以下代码, ...

  5. ubuntu安装中文支持

    sudo apt-get install language-pack-zh-hant language-pack-zh-hans

  6. JavaScrip入门（3）

    函数: var m2=function(){ console.log('2222'); } console.log(typeof(m2)); 输出结果:test.html:31 function js ...

  7. TCP拆包粘包之分隔符解码器

    TCP以流的方式进行数据传输,上层的应用协议为了对消息进行区分,往往采用如下4种方式. (1)消息长度固定,累计读取到长度总和为定长LEN的报文后,就认为读取到了一个完整的消息:将计数器置位,重新开始 ...

  8. DOM--2 创建可重用的对象

    对象中包含的 分类(内置对象: 注意这些都是function:除了Function对象,实例都是object) Function对象 Function实例function 构造函数的function ...

  9. Codeforces Round #335 (Div. 2)

    水 A - Magic Spheres 这题也卡了很久很久,关键是“至少”,所以只要判断多出来的是否比需要的多就行了. #include <bits/stdc++.h> using nam ...

  10. c++ 服务端 客户端

    转载自:http://blog.csdn.net/orange_xxx/article/details/7276868 ,谢谢原作者. 作为个人学习的笔记使用. 服务端: // Server.cpp ...