qq_53594063 2021-06-23 20:01 采纳率: 50%
浏览 26
已结题

实现当单击全选或全不选,按钮时实现复选框和全不选操作

 

  • 写回答

4条回答 默认 最新

  • technologist_30 2021-06-23 20:03
    关注
    <script>
    //1,  全选全不选
    var all=document.getElementById("all");
    var tds=document.querySelectorAll("tbody tr input");//获取表体部分的选框
    console.log(tds);
    
    var flag=true;
    all.onclick=function(){
      flag=all.checked;
      if(flag){
        //如果全选框是选中状态,全部复选框选中
     check();
      }
      else{//取消全选按钮,全部复选框取消
        check();
      }
    }
    function check(){
      for(var i=0;i<tds.length;i++){
        tds[i].checked=flag;
      }
    }
    
    
    //2,当底下选项全部选中时,全选按钮选中
    for(var i=0;i<tds.length;i++){
      tds[i].onclick=judge;
    }
    function judge(){
    var flag_two=true;//用于记录是否全部选中
    for(var i=0;i<tds.length;i++){//每次点击都判断一下是否全部选中
      if(!tds[i].checked){
        flag_two=false;//但凡有一个没有选中,状态标记置为false
    
      }
    }
    all.checked=flag_two;  //把标记状态赋给全选按钮,功能完成
    }
    
    
    //3,反选
    var btn=document.getElementById("reverse");
    btn.onclick=function(){
      var flag_three=true;//依旧是标记状态
      for(var i=0;i<tds.length;i++){
       tds[i].checked=tds[i].checked?false:true;
      }
    }
     
     </script>
    

    循环实现

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 12月28日
  • 已采纳回答 12月20日