JS實現全選與全不選
阿新 • • 發佈：2019-01-05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行換色</title>
<script>
function chanclo(){
//獲取標籤
var arr= document.getElementsByTagName("tr");
//for迴圈實現換色
for(i=1;i<arr.length;i++){
//如果行數為偶數，背景顏色變為紅色
if(i%2==0){
arr[i].style.backgroundColor="red";
}
//如果行數為奇數，背景顏色變為金色
else{
arr[i].style.backgroundColor="gold";
}
}
}
//編寫全選中函式
function allch(obj){
//獲取全選框的選中狀態
var c1=obj.checked;
//獲取其他複選框，返回的為陣列
var c2=document.getElementsByClassName("ch1");
//通過for迴圈實現其他複選框的狀態和全選框一致
for(var i=0;i<c2.length;i++){
c2[i].checked=c1;
}
}
</script>
</head>
<body onload="chanclo()">
<table align="center" border="1" width="300px" height="300px">
<tr >
<th><input type="checkbox" class="ch1"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<th><input type="checkbox" class="ch1"></th>
<td>語文</td>
<td>數學</td>
<td>英語</td>
</tr>
<tr>
<th><input type="checkbox" class="ch1"></th>
<html>
<head>
<meta charset="UTF-8">
<title>隔行換色</title>
<script>
function chanclo(){
//獲取標籤
var arr= document.getElementsByTagName("tr");
//for迴圈實現換色
for(i=1;i<arr.length;i++){
//如果行數為偶數，背景顏色變為紅色
if(i%2==0){
arr[i].style.backgroundColor="red";
}
//如果行數為奇數，背景顏色變為金色
else{
arr[i].style.backgroundColor="gold";
}
}
}
//編寫全選中函式
function allch(obj){
//獲取全選框的選中狀態
var c1=obj.checked;
//獲取其他複選框，返回的為陣列
var c2=document.getElementsByClassName("ch1");
//通過for迴圈實現其他複選框的狀態和全選框一致
for(var i=0;i<c2.length;i++){
c2[i].checked=c1;
}
}
</script>
</head>
<body onload="chanclo()">
<table align="center" border="1" width="300px" height="300px">
<tr >
<th><input type="checkbox" class="ch1"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<th><input type="checkbox" class="ch1"></th>
<td>語文</td>
<td>數學</td>
<td>英語</td>
</tr>
<tr>
<th><input type="checkbox" class="ch1"></th>