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>
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]