全选的实现
来源：9-4 区别getElementByID,getElementsByName,getElementsByTagName
陈国侯
2016-11-05 23:42
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++){
if(hobby[i].type=="checkbox")
hobby[i].checked=true;
}可以用document.getElementsByName("hobby");的方法去实现吗？
写回答
关注
4回答
-
- 慕村1994845
- 2016-11-22 20:18:30
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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"); for(var i=0;i<hobby.length;i++){ hobby[i].checked=true; } // 任务1 } function clearall(){ var hobby = document.getElementsByName("hobby"); for(var i=0;i<hobby.length;i++){ hobby[i].checked=false; } // 任务2 } function checkone(){ var j=document.getElementById("wb").value; // if(j==1){ // document.getElementById("hobby1").checked=true; // } // else if(j==2){ // document.getElementById("hobby2").checked=true; // } // else if(j==3){ // document.getElementById("hobby3").checked=true; // } // else if(j==4){ // document.getElementById("hobby4").checked=true; // } // else if(j==5){ // document.getElementById("hobby5").checked=true; // } // else{ // document.getElementById("hobby6").checked=true; // } var k=document.getElementsByName("hobby"); for(var n=0;n<k.length;n++){ if(k[n].checked=true){ k[n].checked=false; } if(j==n+1){ k[n].checked=true; n=n+1; k[n-2].checked=false; } } } </script> </body> </html> -
- 慕村1994845
- 2016-12-03 21:11:16
function checkone(){ var j=document.getElementById("wb").value; var k=document.getElementsByName("hobby"); for(var n=0;n<k.length;n++){ if(k[n].checked=true){ k[n].checked=false; //这里的作用是为了清除上一次被选中的项 } if(j==n+1){ k[n].checked=true; // n=n+1; // k[n-2].checked=false; }//代码运行到这里，但你在输入框输入一个数字时，比如2。就会有对应的选项被选中； //而当再次输入另一个数字，比如4，确认后，2的选项就会清除，也就是4之前的选项就会清除 //我的代码其实不是最优化的，你可以看其他同学的有些效果看起来更明了些，我只是习惯记录自己写代码的思路，就会注释很多代码而没有删掉 -
- 慕村1994845
- 2016-11-22 20:13:20
可以用啊！看下我的代码：（任务一上的注释）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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.getElementsByName("hobby"); for(var i=0;i<hobby.length;i++){ hobby[i].checked=true; } //这里可以用byname，例子用tagname是为了使用三种不同方法 // 任务1 } function clearall(){ var hobby = document.getElementsByName("hobby"); for(var i=0;i<hobby.length;i++){ hobby[i].checked=false; } // 任务2 } function checkone(){ var j=document.getElementById("wb").value; // if(j==1){ // document.getElementById("hobby1").checked=true; // } // else if(j==2){ // document.getElementById("hobby2").checked=true; // } // else if(j==3){ // document.getElementById("hobby3").checked=true; // } // else if(j==4){ // document.getElementById("hobby4").checked=true; // } // else if(j==5){ // document.getElementById("hobby5").checked=true; // } // else{ // document.getElementById("hobby6").checked=true; // } var k=document.getElementsByName("hobby"); for(var n=0;n<k.length;n++){ if(k[n].checked=true){ k[n].checked=false; } if(j==n+1){ k[n].checked=true; // n=n+1; // k[n-2].checked=false; } } } </script> </body> </html> -
- 墨鱼嬉戏
- 2016-11-06 00:47:50
可以，不过如若用document.getElementsByName("hobby")，得自己提前在标签里面加入name属性，代码的使用量会增加，自己得一个个的去添加name属性，不过直接使用name属性的话，自己对于自己的代码也会很清楚，很容易进行项目命名，显得比较清晰。所以具体使用哪个，需要自己去进行判断考虑。。小小拙见，如果有什么不对的地方，请见谅。
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468060 学习 · 21891 问题
相似问题