| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>多选框</title> | |
| <meta charset="utf-8"> | |
| <style> | |
| *{margin:20; padding:0;} | |
| </style> | |
| </head> | |
| <body> | |
| <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> | |
| <li><input type="checkbox">白菜</li> | |
| <li><input type="checkbox">白菜</li> | |
| <li><input type="checkbox">白菜</li> | |
| <li><input type="checkbox">情人结</li> | |
| <button onclick="change1(true)">全选</button> | |
| <button onclick="change1(false)">不全选</button> | |
| <button onclick="change3()">反选</button> | |
| <li><input onclick="change(this)" type="checkbox">点点</li> | |
| </ul> | |
| <script> | |
| var obj=document.getElementsByTagName('input'); | |
| function change1(res){ | |
| for(var i=0;i<obj.length;i++){ | |
| obj[i].checked=res; | |
| } | |
| } | |
| function change(num){ | |
| for(var i=0;i<obj.length;i++){ | |
| obj[i].checked = num.checked | |
| } | |
| } | |
| function change3(){ | |
| for(var i=0;i<obj.length;i++){ | |
| if(obj[i].checked==true){ | |
| obj[i].checked=false; | |
| }else{ | |
| obj[i].checked=true; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |