首頁 > 開發者 > JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JavaScript全選(全消)，動態全選全消</TITLE>
<script type="text/javascript" language="javascript">
function checkAll()//此方法用來全選和全消複選框
{
var items=document.getElementsByName("checkC");
var itemall=document.getElementById("all");
for(var i=0;i<items.length;i++){
items.checked=itemall.checked;
}
}
function resAll(){
var items=document.getElementsByName("checkC");
var itemall=document.getElementById("all");
var ite=0; //此變數用來記錄當前選中的checkbox的個數
for(var i=0;i<items.length;i++){
//獲得當前選中的checkbox的數量
if(items.checked){
ite++;
}
}
//如果當前選中的數量為有一個沒有選中，並且全選框是選中狀態
//則將全選框的狀態變為不選擇
if(ite==items.length-1&&itemall.checked){
itemall.checked=false;
}
/*---
//這個適用於你想把子選項完全去掉才將全選的效果去掉
if(ite==0&&itemall.checked){
itemall.checked=false;
}
---*/
//如果當前選中的數量為零並且全選框是未選中狀態
//則將全選框的狀態變為選擇
if(ite==items.length&&!itemall.checked){
itemall.checked=true;
}
}
</script>
</HEAD>
<BODY>
此指令碼適合由資料庫動態建立時使用這樣的，因為裡面不需要傳遞參數。因此擴充性不是很高<br/>
<input type="checkbox" name="all" id="all" onclick="checkAll()">全選
<input type="checkbox" name="checkC" onclick="resAll()">1
<input type="checkbox" name="checkC" onclick="resAll()">2
<input type="checkbox" name="checkC" onclick="resAll()">3
<input type="checkbox" name="checkC" onclick="resAll()">4
<input type="checkbox" name="checkC" onclick="resAll()">5
<input type="checkbox" name="checkC" onclick="resAll()">6
<input type="checkbox" name="checkC" onclick="resAll()">7
</BODY>
</HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
