<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript檢查復選框選中的值個數及值</title>
</head>
<body>
<script language="javascript">
var i = 0;
for (;i<20;i++) {
document.write('<input type="checkbox" name="ck" value="'+i+'" /><br />');
}
document.write('<br /><input type="button" id="ckall" name="ckall" value="全選" onclick="checkall();" /> <input type="button" name="delall" value="刪除所選" id="delall" />');
document.write('<br /> <label id="text" style="display:none;"></label>');
// 是否全選復選框函數
function checkall() {
var ckall = document.getElementById("ckall"); // 全選按鈕對象
var ck = document.getElementsByName("ck"); // 復選框對象
// 當要執行全選時
if (ckall.value=="全選") {
var j = 0;
// 循環把復選框選中
for (;j<20;j++) {
ck[j].checked = "true";
}
ckall.value="全不選";
} else if (ckall.value=="全不選") {
// 當要執行全選時
document.getElementById("delall").disabled=false; // 去掉delall按鈕的disabled
document.getElementById("delall").value="刪除所選"; // 修改elall按鈕的value為“刪除所選”
document.getElementById("text").style.display="none"; // 設置 text 為隱藏
// 循環設置全不選
for (j=0;j<20;j++) {
ck[j].checked = null;
}
ckall.value="全選";
}
}
var delall = document.getElementById("delall");
// 點擊刪除按鈕執行下面函數
delall.onclick=function(){
var arr = Array(); // arr為數組
var ck = document.getElementsByName("ck");
for (i=0;i<20;i++) {
if (ck[i].checked) {
arr.push(ck[i].value); // 當復選框選中中將選中的值累加到arr這個數組中
}
}
// 判斷arr數組的個數，如果為0，那麼就是沒有選中，彈出警告信息
if (arr.length==0) {
alert('請先選中數據！');
} else if (arr.length>0){
// 下面是執行刪除動作
delall.disabled=true; // 設置delall按鈕為不可點
delall.value="正在刪除…"; // 設置delall按鈕的value為“正在刪除…”
var text = document.getElementById("text");
text.style.display="block"; // 顯示 text
text.style.fontSize = '12px'; // 設置字體大小
var t = "刪除數據為："; // t 為text要顯示的內容
for (j=0;j<arr.length;j++) {
t += arr[j]+" ";
} www.aiwalls.com
text.innerHTML = t;
}
}
</script>
</body>
</html>
摘自 Lee.的專欄