兴国资源网 Design By www.nnzcdc.com
复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影。接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助。
第一个是关于复选框全选反选的操作,当然我在里面还加了一个小功能,就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态;反之亦然。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> td{ border: 1px solid black; text-align: center; } table{ border: 1px solid black; } #opp{ border-radius: 50%; width: 20px; height: 20px; border: 1px style #eee; outline-style: none; } </style> </head> <body> <table> <tr> <td><input id="all" type="checkbox">全选</td> <td width="300px">复选框全选示例</td> </tr> <tr> <td><input class="list" type="checkbox"></td> <td></td> </tr> <tr> <td><input class="list" type="checkbox"></td> <td></td> </tr> <tr> <td><input class="list" type="checkbox"></td> <td></td> </tr> <tr> <td><input class="list" type="checkbox"></td> <td></td> </tr> <tr> <td><input class="list" type="checkbox"></td> <td></td> </tr> <tr> <td><input class="list" type="checkbox"></td> <td></td> </tr> <tr> <td><input class="list" type="checkbox"></td> <td></td> </tr> <tr> <td><input id="opp" type="button">反选</td> <td></td> </tr> </table> <script> var vll = document.getElementById("all"); var vlist=document.getElementsByClassName("list"); var vopp=document.getElementById("opp"); vll.onclick=function(){ for(var i=0;i<vlist.length;i++){ vlist[i].checked=vll.checked; } } for( var i=0;i<vlist.length;i++){ vlist[i].onclick=function(){ if(this.checked==false){ vll.checked=false; } else{ for(var i2=0;i2<vlist.length;i2++){ if(vlist[i2].checked==false){ break; } if(i2>=vlist.length-1){ vll.checked=true; } } } } } vopp.onclick=function(){ for(var i=0;i<vlist.length;i++){ vlist[i].checked=!vlist[i].checked; if(vlist[i].checked==false){ vll.checked=false; } } } </script> </body> </html>
第二个呢则是自定义复选框样式,就是可以将我们的复选框使用图片来替代,以增加酷炫的效果;而且这里我是完全运用CSS3的写法,不涉及JavaScript的;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box1{ width: 1000px; height: 50px; position: relative; } input{ width: 50px; height: 50px; opacity: 1; display: none; } input+label{ display: block; width: 50px; height: 50px; background: url(img/2.png); background-size: 100%; } input:checked+label{ background: url(img/1.PNG); background-size: 100%; } </style> </head> <body> <div class="box1"> <input type="checkbox" name="" id="input1" value="" /> <label for="input1"></label> </div> <div class="box2"> <input type="checkbox" name="" id="input2" value="" /> <label for="input2"></label> </div> <div class="box3"> <input type="checkbox" name="" id="input3" value="" /> <label for="input3"></label> </div> </body> </html>
以上所述是小编给大家介绍的HTML页面中复选框的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
兴国资源网 Design By www.nnzcdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
兴国资源网 Design By www.nnzcdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- [In-Akustik7506]ReferenceSoundEdition-GreatWomenOfSong(2014)HQCD[WAV+CUE]
- 日本EMI超级名盘TOGE-11035-36BeethovenFidelio-Furtwngler
- 宝丽金50周年2010《古典篇》3CD限定盘[低速原抓WAV+CUE]
- 华纳群星.1992-永远新一天华纳15周年金钻群星演唱会2CD【华纳】【WAV+CUE】
- 原声《功夫熊猫4 OST》[FLAC][545M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- Taylor Swift《THE TORTURED POETS DEPARTMENT- THE ANTHOLOGY》[320K/MP3][279.09MB]
- 崔健《85回顾+梦中的倾诉》2CD [WAV+CUE][771M]
- 群星《安桥试音碟》3CD[FLAC][1.1G]
- Taylor Swift《THE TORTURED POETS DEPARTMENT- THE ANTHOLOGY》][24bit 48kH][FLAC/分轨]
- 群星1995-阿诗玛·中国歌剧金曲[中唱][WAV+CUE]
- [JVC]吴文光-中国古琴:流水[FLAC分轨]
- 刘欢.2004-经典20年珍藏锦集【新索】【WAV+CUE】
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- CD圣经上榜天碟1995-乌仁娜-《蒙古草原之歌》[WAV+CUE].