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>