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、截圖為：