复选框的全选和反选

原创 2018年04月15日 23:58:48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box" id="box">
    <p><input type="checkbox">选项一</p>
    <p><input type="checkbox">选项二</p>
    <p><input type="checkbox">选项三</p>
    <p><input type="checkbox">选项四</p>
    <p><input type="checkbox">选项五</p>
    <p><input type="checkbox">选项六</p>
    <p><input type="checkbox">选项七</p>
</div>
全选<input type="checkbox" value="全选"  id="btn1">
反选<input type="checkbox" value="反选"  id="btn2">
<script>
    var oBox = document.getElementById('box');
    var inputs = oBox.getElementsByTagName('input');
//    自动选中,取消选中
    for (var i = 0; i < inputs.length; i++) {
//        每个复选按钮的点击事件
        inputs[i].onclick=function () {
            for(var i=0;i<inputs.length;i++){
                if(!inputs[i].checked){
//                    如果有一个不符合条件,终止循环
                    document.getElementById('btn1').checked=false;
                    break;
                }
                else{
                    if(i==inputs.length-1){
                        document.getElementById('btn1').checked=true;
                    }
                }
            }
        }
    }
//    全选按钮
    document.getElementById('btn1').onclick=function () {
        if(this.checked){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }
        }
        else{
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=false;
            }
        }
    }
//    反选按钮
    document.getElementById('btn2').onclick=function () {
        for(var i=0;i<inputs.length;i++){
            if(inputs[i].checked){
                inputs[i].checked=false;
            }
            else{
                inputs[i].checked=true;
            }
        }
    }

</script>
</body>
</html>

卸载3721网络实名的方法

    把3721称呼为病毒实不为过,这个家伙不仅非常讨厌,而且几乎无法卸载!本人毕竟对软件开发比较熟悉,特别看不惯一些软件强硬潜入自己机器的问题,终于软磨硬泡把3721搞定了,以下是卸载方法:   ...
  • killererer
  • killererer
  • 2001-08-24 15:11:00
  • 2135

jquery实现复选框(checkbox)的全选与反选

介绍一下jquery实现checkbox的全选与反选
  • u013871100
  • u013871100
  • 2016-10-06 23:24:35
  • 2735

复选框的全选和反选、复选框的全选和反选

  • 2010年12月29日 15:07
  • 3KB
  • 下载

checkbox全选、全不选、反选

第一次写博客,这边简单的记录下checkbox常见的勾选代码 //全选、全不选 function selectAll() { if ($("#selectAll").attr("checke...
  • qq_19707515
  • qq_19707515
  • 2015-11-04 11:18:57
  • 3697

js中checkbox中的全选和反选效果实现

Document //获取checkbox按钮组 var allpro = document.getElementsByName("c1"); //全选...
  • wangdajiao
  • wangdajiao
  • 2016-10-20 10:54:15
  • 5246

【JavaScript】复选框的全选、反选,判断哪些复选框被选中

复选框的全选、反选,判断哪些复选框被选中,这个功能不难做, 利用document.getElementsByName("xxx");能够轻易实现,注意其返回值是一个节点数组便是了。 不过这功能对于...
  • yongh701
  • yongh701
  • 2015-06-06 09:21:43
  • 3866

复选框全选和反选例子

$(document).ready(function () { //全选或全不选 $("#all").click(functio...
  • Bling_Bling_
  • Bling_Bling_
  • 2016-12-21 11:03:31
  • 388

Jsp中复选框的全选与反选

Jsp中复选框的全选与反选
  • holinc
  • holinc
  • 2015-08-09 16:44:18
  • 3433

HTML 复选框 checkbox 的 JavaScript 的全选和全反选

checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: Insert title here 序号 选择 ...
  • joyous
  • joyous
  • 2013-09-30 11:16:18
  • 33995

三种方式实现checkbox全选,反选

  • 2017年09月27日 15:29
  • 2KB
  • 下载
收藏助手
不良信息举报
您举报文章:复选框的全选和反选
举报原因:
原因补充:

(最多只允许输入30个字)