JavaScript 實現的checkbox經典實例分享
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>郵件刪除</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
table{
width: 400px;
margin-left:200px;
margin-top:20px;
font-weight: bold;
}
th,td{
padding: 7px;
}
#topOne{
width: 80px;
padding: 10px;
}
#topTwo{
width: 120px;
text-align: center;
}
#topThree{
width: 200px;
text-align: center;
}
#endColspan{
text-align: center;
}
#endColspan input{
margin: 0 5px;
}
</style>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="">
<!--第一行-->
<tr id="top">
<td id="topOne">
<input type="checkbox" id="allInpTop" value="" />
<span id="allSpanTop">全選</span>
</td>
<td id="topTwo">選擇路線</td>
<td id="topThree">請選擇英雄</td>
</tr>
<!--第二行-->
<tr id="content1">
<td id="contentOne1">
<input type="checkbox" name="" id="contentOne_input1" value="" />
</td>
<td id="contentTwo1">上單</td>
<td id="contentThree1">德瑪</td>
</tr>
<tr id="content2">
<td id="contentOne2">
<input type="checkbox" name="" id="contentOne_input2" value="" />
</td>
<td id="contentTwo2">中單</td>
<td id="contentThree2">安妮</td>
</tr>
<tr id="content3">
<td id="contentOne3">
<input type="checkbox" name="" id="contentOne_input3" value="" />
</td>
<td id="contentTwo3">打野</td>
<td id="contentThree3">螳螂</td>
</tr>
<!--第三行-->
<tr id="end">
<td id="endOne">
<input type="checkbox" id="endOne_input" value="" />
<span id="endOne_span">全選</span>
</td>
<td id="endColspan" colspan="2">
<input type="button" name="" id="endColspan_btn1" value="全選" />
<input type="button" name="" id="endColspan_btn2" value="取消全選" />
<input type="button" name="" id="endColspan_btn3" value="反選" />
<input type="button" name="" id="endColspan_btn4" value="刪除所選郵件" />
</td>
</tr>
</table>
</body>
<script type="text/javascript">
var allInpTopObj = document.getElementById("allInpTop");
var endOne_input = document.getElementById("endOne_input");
var content1Obj = document.getElementById("content1");
var content2Obj = document.getElementById("content2");
var content3Obj = document.getElementById("content3");
var contentOne_inputObj1 = document.getElementById("contentOne_input1");
var contentOne_inputObj2 = document.getElementById("contentOne_input2");
var contentOne_inputObj3 = document.getElementById("contentOne_input3");
var endColspan_btn1Obj = document.getElementById("endColspan_btn1");
var endColspan_btn2Obj = document.getElementById("endColspan_btn2");
var endColspan_btn3Obj = document.getElementById("endColspan_btn3");
var endColspan_btn4Obj = document.getElementById("endColspan_btn4");
var luxianObj = document.getElementById("luxian");
var renwuObj = document.getElementById("renwu");
var strInput = [contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3,allInpTopObj,endOne_input];
var checks = [contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3];
var s = [content1Obj,content2Obj,content3Obj];
var bool = true;
var num;
function pandaunFun () {
if (allInpTopObj.checked = true) {
allInpTopObj.checked = false;
}
if (endOne_input.checked = true) {
endOne_input.checked = false;
}
}
function allFun () {
for (var i = 0; i < strInput.length; i++) {
strInput[i].checked = true;//選中
}
}
function cancelFun () {
for (var i = 0; i < strInput.length; i++) {
strInput[i].checked = false;//選中
}
}
function unAllFun () {
for (var i = 0; i < strInput.length; i++) {
if (strInput[i].checked == true) {
strInput[i].checked = false;//非選中
} else{
strInput[i].checked = true;//選中
}
}
pandaunFun ();
}
function deleteFun () {
for (var i = 0; i < s.length; i++) {
if (checks[i].checked) {
s[i].style.display = "none";
}
}
pandaunFun ();
}
function numCheckFun () {
num = 0;
for (var j = 0; j < checks.length; j++) {
if (checks[j].checked) {
num++;
}
}
if (num == checks.length) {
allInpTopObj.checked = true;
endOne_input.checked = true;
}else{
allInpTopObj.checked = false;
endOne_input.checked = false;
}
}
endColspan_btn1Obj.onclick = allFun;
endColspan_btn2Obj.onclick = cancelFun;
endColspan_btn3Obj.onclick = unAllFun;
endColspan_btn4Obj.onclick = deleteFun;
for (var i = 0; i < checks.length; i++) {
checks[i].onclick = numCheckFun;
}
</script>
</html>