杨老师课堂之JavaScript案例全选、全不选、及反选

原创

杨校老师 2022-02-16 11:12:44 博主文章分类：JavaScript ©著作权

文章标签 js全选全不选 JavaScript案例 js复选框案例 JavaScript反选案例复选框 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者杨校老师的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript案例之全选、全不选、及反选

效果图：

杨老师课堂之JavaScript案例全选、全不选、及反选_JavaScript反选案例

思路： 1.先做界面 1.1制作按钮 1.2制作复选框 2..JavaScript 3.1根据不同的标签名称去获取不同的元素 3.2当第一个按钮--全选--被单击会触发一个函数，此函数涉及到复选框全部选中功能，但是复选框一共有多少个是未知的，所以我们要去做一个循环，进行遍历得到有多少个复选框【定义变量、循环条件、循环环境】 3.3通过循环使得每一个复选框都会处于被选中状态，即为true、反之亦然！ 3.4反选：依旧采用循环去获取复选框的个数，进行判断： 判断条件是：当某一个复选框被选中后， 执行内容为：其余复选框全部处于被选中状态下，即反选！ 3.5判断：当图片到达最后一张，将图片变量重置为0，进行循环递加到原图的图片名称1上去参考代码： Html代码

<button>全选</button>
    <button>全不选</button>
    <button>反选</button>
    <br />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />

JavaScript代码

<script type="text/javascript">
        window.onload = function(){

          var oBtn = document.getElementsByTagName('button');
          var oinput = document.getElementsByTagName('input');

          oBtn[0].onclick = function(){

            for(var i = 0;i<oinput.length;i++){
              oinput[i].checked =true;
            }

          }
          oBtn[1].onclick = function(){

            for(var i = 0;i<oinput.length;i++){
              oinput[i].checked = false;
            }

          }
          oBtn[2].onclick = function(){

            for(var i = 0;i<oinput.length;i++){
              if(oinput[i].checked == true){
                oinput[i].checked = false;
              }else{
                oinput[i].checked = true;

              }
            }

          }
        }
    </script>