本文实例为大家分享了javascript布局实现单选按钮控件的具体代码,供大家参考,具体内容如下
主要是对最近学习的知识做练习,可以巩固提高!
效果如下图:
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>单选控件</title> <style type="text/css"> .radiod{ width: 300px; height: 300px; background: url(field.jpg) no-repeat; } .radiod li{ font-size: 18px; font-family: arial; list-style: none; } .leftu{ float: left; } .rightu{ float: right; margin-right: 80px; } </style> <script type="text/javascript"> window.onload = function(){ var ali = document.getelementsbytagname('li'); var ainput = document.getelementsbytagname('input'); var i = 0; var btn = document.getelementbyid('foodbtn'); btn.onclick = function(){ for(i=0;i<ainput.length;i++) { if(ainput[i].checked == true){ alert(ainput[i].value); } } } } </script> </head> <body> <div class="radiod"> <ul class="leftu"> <li><input type="radio" name="food" value="面条1">面条1</li> <li><input type="radio" name="food" value="馒头1">馒头1</li> <li><input type="radio" name="food" value="烧饼1">烧饼1</li> <li><input type="radio" name="food" value="窝头1">窝头1</li> </ul> <ul class="rightu"> <li><input type="radio" name="food" value="面条2">面条2</li> <li><input type="radio" name="food" value="馒头2">馒头2</li> <li><input type="radio" name="food" value="烧饼2">烧饼2</li> <li><input type="radio" name="food" value="窝头2">窝头2</li> </ul> <button id="foodbtn">我的食物</button> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论