基于JavaScript实现复选框的全选和取消全选

基于JavaScript实现复选框的全选和取消全选

测试代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head> <body> <div> <ul> <li> <label><input type="checkbox" value="wpa"/>液体</label> </li> <li> <label><input type="checkbox" value="wpb"/>粉末</label> </li> <li> <label><input type="checkbox" value="wpc"/>仿牌</label> </li> <li> <label><input type="checkbox" value="wpd"/>纯电池</label> </li> <li> <label><input type="checkbox" value="wpe"/>危险品</label> </li> <li> <label><input type="checkbox" value="wpd"/>配套电池</label> </li> <li> <label><input type="button" value="全选/取消"/></label> </li> </ul> </div> <script src="https://www.jb51.net/js/jquery-1.11.3.js"></script> <script type="text/javascript"> /*全选或取消全选*/ function selectAllDels(){ var allWp=document.getElementsByName("wp"); var selOrUnsel=false; for(var i=0; i<allWp.length;i++){ if(allWp[i].checked){ selOrUnsel=true; break; } } if (selOrUnsel){ allUnchk(allWp); }else{ allchk(allWp); } } function allchk(allWp){ for(var i=0; i<allWp.length;i++ ){ allWp[i].checked=true; } } function allUnchk(allWp){ for(var i=0; i<allWp.length;i++){ allWp[i].checked=false; } } </script> </body> </html>

直接复制代码可用。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwgdpj.html