JavaScript實現全選功能
阿新 • • 發佈:2019-02-07
1、新建一個文件(用NotePad軟體,為了使得在瀏覽器中開啟不是亂碼,在軟體的檔案出找到編碼,將其修改為UTF-8編碼。或者點選谷歌瀏覽器中的右上角的三條槓,選擇更多工具->編碼->UTF-8),將其重新命名(例:第一個java
script.html 注:一定要把副檔名改為.html)。
2、將其用記事本的格式開啟,進行編寫。
3、以下是編寫的“按鈕全選的實現”的相關程式碼:
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html>
<head>
<title>
全選按鈕的實現 </title>
</head>
<body>
<div>
<input
type= "checkbox"
id= "chkAll"
onclick= "checkAll(this)"
/>全選
</div>
<div>
<input
type= "checkbox"
name= "chk" />選項1
</div>
<div>
<input
type= "checkbox"
name= "chk" />選項2
</div>
<div>
<input
type= "checkbox"
name= "chk" />選項3
</div>
<div>
<input
type= "checkbox"
name= "chk" />選項4
</div>
<input
type= "checkbox"
name= "chk" />選項5
</div>
</body>
<script>
//全選
function
checkAll(e) {
var
t=document.getElementsByName( "chk" );
alert(t.length);
for ( var
i=0;i<t.length;i++)
{
t[i].checked=document.getElementById( "chkAll" ).checked;
}
}
</script>
</html>
|
4、截圖為: