JavaScript 实现的checkbox经典实例分享
JavaScript实现的checkbox经典实例分享
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>邮件删除</title>
<styletype="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;
}
#endColspaninput{
margin:05px;
}
</style>
</head>
<body>
<tableborder="2"cellspacing="0"cellpadding="">
<!--第一行-->
<trid="top">
<tdid="topOne">
<inputtype="checkbox"id="allInpTop"value=""/>
<spanid="allSpanTop">全选</span>
</td>
<tdid="topTwo">选择路线</td>
<tdid="topThree">请选择英雄</td>
</tr>
<!--第二行-->
<trid="content1">
<tdid="contentOne1">
<inputtype="checkbox"name=""id="contentOne_input1"value=""/>
</td>
<tdid="contentTwo1">上单</td>
<tdid="contentThree1">德玛</td>
</tr>
<trid="content2">
<tdid="contentOne2">
<inputtype="checkbox"name=""id="contentOne_input2"value=""/>
</td>
<tdid="contentTwo2">中单</td>
<tdid="contentThree2">安妮</td>
</tr>
<trid="content3">
<tdid="contentOne3">
<inputtype="checkbox"name=""id="contentOne_input3"value=""/>
</td>
<tdid="contentTwo3">打野</td>
<tdid="contentThree3">螳螂</td>
</tr>
<!--第三行-->
<trid="end">
<tdid="endOne">
<inputtype="checkbox"id="endOne_input"value=""/>
<spanid="endOne_span">全选</span>
</td>
<tdid="endColspan"colspan="2">
<inputtype="button"name=""id="endColspan_btn1"value="全选"/>
<inputtype="button"name=""id="endColspan_btn2"value="取消全选"/>
<inputtype="button"name=""id="endColspan_btn3"value="反选"/>
<inputtype="button"name=""id="endColspan_btn4"value="删除所选邮件"/>
</td>
</tr>
</table>
</body>
<scripttype="text/javascript">
varallInpTopObj=document.getElementById("allInpTop");
varendOne_input=document.getElementById("endOne_input");
varcontent1Obj=document.getElementById("content1");
varcontent2Obj=document.getElementById("content2");
varcontent3Obj=document.getElementById("content3");
varcontentOne_inputObj1=document.getElementById("contentOne_input1");
varcontentOne_inputObj2=document.getElementById("contentOne_input2");
varcontentOne_inputObj3=document.getElementById("contentOne_input3");
varendColspan_btn1Obj=document.getElementById("endColspan_btn1");
varendColspan_btn2Obj=document.getElementById("endColspan_btn2");
varendColspan_btn3Obj=document.getElementById("endColspan_btn3");
varendColspan_btn4Obj=document.getElementById("endColspan_btn4");
varluxianObj=document.getElementById("luxian");
varrenwuObj=document.getElementById("renwu");
varstrInput=[contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3,allInpTopObj,endOne_input];
varchecks=[contentOne_inputObj1,contentOne_inputObj2,contentOne_inputObj3];
vars=[content1Obj,content2Obj,content3Obj];
varbool=true;
varnum;
functionpandaunFun(){
if(allInpTopObj.checked=true){
allInpTopObj.checked=false;
}
if(endOne_input.checked=true){
endOne_input.checked=false;
}
}
functionallFun(){
for(vari=0;i<strInput.length;i++){
strInput[i].checked=true;//选中
}
}
functioncancelFun(){
for(vari=0;i<strInput.length;i++){
strInput[i].checked=false;//选中
}
}
functionunAllFun(){
for(vari=0;i<strInput.length;i++){
if(strInput[i].checked==true){
strInput[i].checked=false;//非选中
}else{
strInput[i].checked=true;//选中
}
}
pandaunFun();
}
functiondeleteFun(){
for(vari=0;i<s.length;i++){
if(checks[i].checked){
s[i].style.display="none";
}
}
pandaunFun();
}
functionnumCheckFun(){
num=0;
for(varj=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(vari=0;i<checks.length;i++){
checks[i].onclick=numCheckFun;
}
</script>
</html>