- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>全选与全不选</title>
- </head>
- <body>
- <form>
- 请选择你爱好:<br>
- <input type="checkbox" name="hobby" id="hobby1"> 音乐
- <input type="checkbox" name="hobby" id="hobby2"> 登山
- <input type="checkbox" name="hobby" id="hobby3"> 游泳
- <input type="checkbox" name="hobby" id="hobby4"> 阅读
- <input type="checkbox" name="hobby" id="hobby5"> 打球
- <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
- <input type="button" value = "全选" onclick = "checkall();">
- <input type="button" value = "全不选" onclick = "clearall();">
- <p>请输入您要选择爱好的序号,序号为1-6:</p>
- <input id="wb" name="wb" type="text" >
- <input name="ok" type="button" value="确定" onclick = "checkone();">
- </form>
- <script type="text/javascript">
- function checkall(){
- var hobby = document.getElementsByTagName("input");
- //alert(hobby.length);
- for(var i= 0,j = 6;i<j;i++)
- {
- hobby[i].checked = true;
- }
- }
- function clearall(){
- var hobby = document.getElementsByName("hobby");
- //alert(hobby.length);
- for(var i= 0,j=hobby.length;i<j;i++)
- {
- hobby[i].checked = false;
- }
- }
- function checkone(){
- clearall();
- var j=document.getElementById("wb").value;
- document.getElementById("hobby"+j).checked = true;
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/2707201614896.html
来源: http://www.codesnippet.cn/detail/2707201614896.html