以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。
-
ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。
-
Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。
-
TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName(“小孩”)。
把上面的例子转换到HTML中,如下:
<input type="checkbox" name="hobby" id="hobby1">
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
问题:通过下面的例子(6个name="hobby"的复选项,两个按钮)来区分三种方法的不同:
实现全选、全不选,以及按序号选择的功能。
代码如下:
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>demo</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(){//获取的是所有input标签,包括复选项和按钮,所以要判断是否是复选项,如是选中。var hobby = document.getElementsByTagName("input");for(i = 0;i < hobby.length;i++){if(hobby[i].type == "checkbox"){hobby[i].checked = true; }}}function clearall(){var hobby = document.getElementsByName("hobby");//当点击"全不选"按钮时,将取消所有选中的复选项。for(i = 0;i < hobby.length;i++){hobby[i].checked = false;}} //在文本框中输入输入1-6数值,当点击"确定"按钮时,根据输入的数值,通过id选中相应的复选项。function checkone(){var j=document.getElementById("wb").value;//hobby+j 即是字符串相加,可以确定是哪一个IDvar hobby = document.getElementById("hobby"+j);hobby.checked = true; } </script></body>
</html>
ps:本次所有内容来自慕课