1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <form> 10 请选择你爱好:<br> 11 <input type="checkbox" name="hobby" id="hobby1"> 音乐 12 <input type="checkbox" name="hobby" id="hobby2"> 登山 13 <input type="checkbox" name="hobby" id="hobby3"> 游泳 14 <input type="checkbox" name="hobby" id="hobby4"> 阅读 15 <input type="checkbox" name="hobby" id="hobby5"> 打球 16 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br> 17 <input type="button" value = "全选" onclick = "checkall();"> 18 <input type="button" value = "全不选" onclick = "clearall();"> 19 <p>请输入您要选择爱好的序号，序号为1-6:</p> 20 <input id="wb" name="wb" type="text" > 21 <input name="ok" type="button" value="确定" onclick = "checkone();"> 22 </form> 23 <script type="text/javascript"> 24 //全选 25 function checkall(){ 26 var hobby = document.getElementsByTagName("input"); 27 28 for(var i=0;i<hobby.length;i++){ 29 30 hobby[i].checked=true; 31 32 } 33 34 } 35 //全不选 36 function clearall(){ 37 var hobby = document.getElementsByName("hobby"); 38 39 for(var i=0;i<hobby.length;i++){ 40 41 hobby[i].checked=false; 42 43 } 44 45 } 46 47 function checkone(){ 48 var j=document.getElementById("wb").value; 49 var hobby=document.getElementById(('hobby'+j)); 50 hobby.checked=true; 51 52 } 53 54 </script> 55 </body> 56 </html>