HTML页面中复选框的操作方法
建站知识 2021-07-02 22:42www.168986.cn长沙网站建设
复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影。接下来,是我之前写过的两个小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页面中复选框的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:详解html中的marquee属性
下一篇:概述页面中浮动与清除浮动
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML