JS实现checkbox控制全选/非全选(两种方式)

时间:2022-11-13 18:51:06
第一种:假实现,功能简单比较通用。 表头全选非全选checkbox标签 <input type="checkbox"  name="che"  id="selectAllID3" onclick="selectAll(this)" /></td> JS事件: //全选 反选function selectAll(){$$('input[type="checkbox"][chx="chx"]').each(function(i){i.checked = $("selectAllID3").checked;});  }


第二种:当数据列表中的checkbox全部选中时,表头全选按钮选中。如果取消其中一个则 表头全选按钮取消选中。List数据列表中的checkbox标签 <input type='checkbox'   onclick="checkCopy(${str.index});" id='chk2_${str.index}' trindex="${str.index}"   needSave="${ID}" chx="chx"/> JS事件: function checkCopy(obj){//------------------点击子checkbox 全选 非全选--开始---------------------var inlength=document.getElementsByTagName("input");var count=0; //全选统计    var num=0;   //非全选统计for(var i=0;i < inlength.length; i++){if(inlength[i].type =="checkbox" && inlength[i].chx=="chx"){  if(inlength[i].checked==true) {count++;}      if(inlength[i].checked==false){num++;}}}if(count == inlength.length){document.getElementById("selectAllID3").checked=true;}if(num == 0){document.getElementById("selectAllID3").checked=true;}if(num > 0){document.getElementById("selectAllID3").checked=false;}//------------------点击子checkbox 全选 非全选--结束---------------------}