<!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. 软考之PV操作（同步）

    这几天,陆续有那么三两个同学跟我讨论了一下关于软考上的PV操作的题,吾虽不才,但还是把同学们讲通了,在此,特分享一下自己的思路和想法,愿对大家有点帮助! 下面,我们就通过自己做过的试卷上两道题来分析: ...

  2. JavaScrip入门（3）

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

  3. iphone 数字字段颜色兼容问题

    在iphone手机中,有些字段的颜色会自动发生变化,在head中添加如下meta即可.<meta name = "format-detection" content=&quo ...

  4. SPOJ SUBST1 后缀数组

    题目链接:http://www.spoj.com/problems/SUBST1/en/ 题意:给定一个字符串,求不相同的子串个数. 思路:直接根据09年oi论文<<后缀数组——出来字符串 ...

  5. Codeforces 335C Sorting Railway Cars

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  6. Mac 显示 Finder 隐藏文件

    显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏Mac隐藏文件的命令:defaults writ ...

  7. iOS UIImageView用代码添加点击事件

    image.userInteractionEnabled = YES; UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]ini ...

  8. js、PHP将分数字符串转换为小数

    PHP:$s = "1/3"; $s = str_replace(array('[',']','mod'),array('(',')','%'),$s);//将原三字符串中的只有在 ...

  9. Visual Studio: Show Solution Platform in Toolbar

    link: http://stackoverflow.com/questions/7516755/solution-configuration-but-not-platform-in-vs2010-t ...

  10. unity awake start 的区别

    void Awake (){ } //初始化函数,在游戏开始时系统自动调用.一般用来创建变量之类的东西. void Start(){ } //初始化函数,在所有Awake函数运行完之后(一般是这样,但 ...