原生js实现全选、反选
收集了一个原生的js实现全选、全不选、反选
<!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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> *{margin:0;padding:0;} ul{list-style-type:none;} #wrap{width:150px;margin:50px auto;} </style> <title></title> </head> <body> <div id="wrap"> <input type="button" id="selecte_all" value="全选"/> <input type="button" id="selecte_no" value="全不选"/> <input type="button" id="selecte_etr" value="反选"/> <ul> <li><input type="checkbox" class="about" />资料</li> <li><input type="checkbox" class="about" />简历</li> <li><input type="checkbox" class="about" />经历</li> <li><input type="checkbox" class="about" />爱好</li> <li><input type="checkbox" class="about" />其他</li> </ul> </div> <script type="text/javascript"> window.onload = init; //全部加载完执行 function init() { var selecte_all = document.getElementById('selecte_all'); //全选 var selecte_no = document.getElementById('selecte_no'); //全不选 var selecte_etr = document.getElementById('selecte_etr'); //反选 var check_list = document.getElementsByClassName('about'); //需要选择的input //全选 selecte_all.onclick = function() { for (i = 0; i < check_list.length; i++) { check_list[i].checked = true; }; } //全不选 selecte_no.onclick = function() { for (i = 0; i < check_list.length; i++) { check_list[i].checked = false; }; } //反选 selecte_etr.onclick = function() { for (i = 0; i < check_list.length; i++) { check_list[i].checked = !check_list[i].checked; }; } } </script> </body> </html>
原文:http://www.alixixi.com/web/a/2012102984774.shtml