您现在的位置是:首页 > 电脑技术查询 > web开发

JS 控制checkbox 获取 全选 全不选 一起不选择全选则不被选择 全部选择全选被选择

编辑:chaxungu时间:2022-10-10 23:24:09分类:web开发

JS 控制checkbox 获取 全选 全不选 一行不选择全选则不被选择 全部选择全选被选择
</pre><pre name="code" class="javascript"><span style="font-size:18px;">//点击全选按钮的事件操作    function selectAll(){         var allcheckBoxs=document.getElementsByName("iTo");         var select=document.getElementsByName("select");         if(select[0].checked){ //,每一个都选择,全选按钮被选择           for(var i=0;i<allcheckBoxs.length;i++){              allcheckBoxs[i].checked = true;            }         }else{  //有一个不选择,全选按钮则不选择         for(var i=0;i<allcheckBoxs.length;i++){             allcheckBoxs[i].checked = false;           }         }       }          //点击每一行的checkbox触发的事件  function  getSelectRow(thisObj){    //判断iTo是否选择,不选择 全选按钮不选择     if(!$(thisObj).attr("checked")){</span> --lenstr;</span>//被选择的行自减一     $("#select").attr("checked",false);     }     //当所有列复选框都选择,全选按钮选择     if($(thisObj).attr("checked")){       var allcheckBoxs=document.getElementsByName("iTo");       ++lenstr;//被选择的行自加一       if(allcheckBoxs.length == lenstr ){ //当行checkbox选择的数量=所有的checkbox的行数       $("#select").attr("checked",true);       }     }}//js定义一个全局变量//定义全局变量,获取用户点击的列复选框的行数   var lenstr = $("input[name=iTo].checked").length ; </span>

<span style="font-size:18px;"><!--页面上 全选按钮--><input type='checkbox' id='select' name="select" onclick="selectAll();"/><INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择1<INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择2<INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择3<INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择4<INPUT type="checkbox" name="iTo" onclick='getRowValue(this);'>选择5</span>