用js实现全选和反选

mac2024-01-26 38

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button class="Select">全选</button> <button class="Select">反选</button> <ul> <li><input type="checkbox">打篮球</li> <li><input type="checkbox">看电影</li> <li><input type="checkbox">看书</li> <li><input type="checkbox">书法</li> <li><input type="checkbox">唱歌</li> <li><input type="checkbox">徒步旅行</li> </ul> <script> var Btns=document.getElementsByClassName('Select'); var Tags=document.getElementsByTagName('input'); for(var i=0;i<Btns.length;i++){ Btns[i].onclick=function(){ if(this.innerHTML=='全选'){ for(var k=0;k<Tags.length;k++){ Tags[k].checked='checked'; } } if (this.innerHTML=="反选"){ for(var j=0;j<Tags.length;j++){ if(Tags[j].checked){ // if(Tags[j].checked=true){ Tags[j].checked=''; }else{ Tags[j].checked='checked'; } } } } } </script> </body> </html>

显示：改进全选为一个复选框，如果全选的话，那么全选的复选框也会有对勾，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>全选-反选</title> <script type="text/javascript"> window.onload=function(){ function $(id){ return document.getElementById(id); } var cks=$('favors').getElementsByTagName('input'); $('chkAll').onclick=function(){ for(var i=0;i<cks.length;i++){ cks[i].checked=this.checked; } } $('reverse').onclick=function(){ var flag = true; for(var i=0;i<cks.length;i++){ cks[i].checked=!cks[i].checked; if(!cks[i].checked){ flag = false; } } $('chkAll').checked = flag; } for(var i=0; i<cks.length; i++){ cks[i].onclick=function(){ var flag=true; for(var j=0; j<cks.length; j++){ if(!cks[j].checked){ flag = false; break; } } $('chkAll').checked = flag; } } } </script> </head> <body> <h2>请选择您的兴趣爱好</h2> <input type="checkbox" id="chkAll" /> <label for="chkAll">全选</label> <input type="button" value="反选" id="reverse" /> <ul id="favors"> <li><input type="checkbox" value="" />打篮球</li> <li><input type="checkbox" value="" />踢足球</li> <li><input type="checkbox" value="" />看电影</li> <li><input type="checkbox" value="" />看书</li> <li><input type="checkbox" value="" />书法</li> <li><input type="checkbox" value="" />唱歌</li> <li><input type="checkbox" value="" />徒步旅行</li> </ul> </body> </html>

最新回复(0)