案列三:全选全不选反选

案列三:全选全不选反选

一、思路分析

    ·使用复选框上面一个属性判断是否选中
            - checked属性
            - checked=true:选中
            - checked=false:不选中
    ·创建一个页面
            ·复选框和按钮
              - 四个复选框表示爱好
              - 还有一个复选框操作 全选和选不选,也有一个事件
    ·三个按钮,分别有事件
              - 全  选
              - 全不选
              - 反  选
    ·全选操作
            ·步骤:
             /*
            1、获取要操作的复选框
              - 使用getElementsByName()
            2、返回是数组,
              - 属性 checked判断复选框是否选中
                checked = true; //表示选中
                checked = false;//表示不选中
              - 遍历数组,得到的是每一个checkbox
                把每一个checkbox属性checked=true
            */
    ·全不选操作
        ·步骤
            /*
            1、获取到要操作的复选框
            2、返回的是数组,遍历数组
            3、得到每一个复选框
            4、设置复选框的属性 checked=false
            */

    ·反选操作
        ·步骤
            /*
            1、获取到要操作的复选框
            2、返回数组,遍历数组
            3、得到每一个复选框
            4、判断当前的复选框是选中还是不选中
              - if(love1.checked == true) {}
            5、如果选中,属性checked设置成false,否则,设置成true
            */
    ·使用复选框实现全选和全不选
        ·步骤
            /*
            1、得到上面那个复选框
              - 通过id获取到
            2、判断这个复选框是否是选中
              - if条件,checked==true
            3、如果是选中,下面是全选
            4、如果不是选中,下面是全不选
            */

二:代码如下
------

        <html>
           <head>
             <title>HTML示例</title>
             <style type="text/css">
             </style>
           </head>
           <body>
              <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
              <br/>
              <input type="checkbox" name="love"/>篮球
              <input type="checkbox" name="love"/>排球
              <input type="checkbox" name="love"/>羽毛球
              <input type="checkbox" name="love"/>乒乓球
              <br/>
              <input type="button" value="全选" onclick="selAll();"/>
              <input type="button" value="全不选" onclick="selNo();"/>
              <input type="button" value="反选" onclick="selOther();"/>
              <script type="text/javascript">
              //实现全选和全不选
              function selAllNo() {
                  /
                  1、得到上面那个复选框
                      - 通过id获取到
                  2、判断这个复选框是否是选中
                      - if条件,checked==true
                  3、如果是选中,下面是全选
                  4、如果不是选中,下面是全不选
                  /
                  //得到上面复选框
                  var box1 = document.getElementById("boxid");
                  //判断这个复选框是否是选择
                  if(box1.checked == true) { //是选择状态
                  //调用全选方法
                  selAll();
                  } else { //不是选中状态
                  //调用全不选方法
                  selNo();
                  }
              }
              //实现反选的操作
              function selOther() {
                  /
                  1、获取到要操作的复选框
                  2、返回数组,遍历数组
                  3、得到每一个复选框
                  4、判断当前的复选框是选中还是不选中
                      - if(love1.checked == true) {}
                  5、如果选中,属性checked设置成false,否则,设置成true
                  /
                  //获取要操作的复选框
                  var loves11 = document.getElementsByName("love");
                  //遍历数组
                  for(var a=0;a<loves11.length;a++) {
                  //得到每一个复选框
                  var love11 = loves11[a];
                  //判断当前这个复选框是什么状态
                  if(love11.checked == true) { //是选中的状态
                      //设置checked=false
                      love11.checked = false;
                  } else { //是不选中的状态
                      //把checked=true
                      love11.checked = true;
                  }
                  }
              }
              //实现全不选的操作
              function selNo() {
                  /
                  1、获取到要操作的复选框
                  2、返回的是数组,遍历数组
                  3、得到每一个复选框
                  4、设置复选框的属性 checked=false
                  /
                  //得到要操作的复选框
                  var loves1 = document.getElementsByName("love");
                  //遍历数组
                  for(var j=0;j<loves1.length;j++) {
                  //得到每一个复选框
                  var love1 = loves1[j];
                  //设置属性的值checked = false;
                  love1.checked = false;
                  }
              }
              //实现全选的操作
              function selAll() {
                  /
                  1、获取要操作的复选框 
                      - 使用getElementsByName()
                  2、返回是数组,
                      - 属性 checked判断复选框是否选中
                       checked = true; //表示选中
                       checked = false;//表示不选中
                      - 遍历数组,得到的是每一个checkbox
                       把每一个checkbox属性checked=true                    
                  /
                  //获取要操作的复选框
                  var loves = document.getElementsByName("love");
                  //遍历数组,得到每一个复选框
                  for(var i=0;i<loves.length;i++) {
                 var love1 = loves[i]; //得到每一个复选框
                 //设置属性是true
                 love1.checked = true;
                 }
             }
             </script>
         </body>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值