js布局实现单选按钮控件
2020-02-13 10:45
435 查看
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- javascript简单布局实现单选按钮控件
- 基于JS分页控件实现简单美观仿淘宝分页按钮效果
- js实现不提交表单获取单选按钮值的方法
- JS实现制作弹出小窗口并获取单选按钮参数值
- js实现两个单选按钮,选不同的选项弹出显示不同的下拉框
- js实现两个单选按钮,选不同的选项弹出显示不同的下拉框
- ww控件实现某字段多个单选按钮操作
- 标签控件 流式布局 实现单选 多选
- js实现不提交表单获取单选按钮值的方法
- RecyclerView单选框删除条目,全选删除,Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算
- RadioGroup中嵌套LinearLayout布局无法实现按钮单选
- 如何隐藏掉微信中的“投诉”按钮?-纯JS代码实现演示
- devexpress表格控件gridcontrol图片列,按钮列,时间列等特殊列的实现
- jquery实现选中单选按钮下拉伸缩效果
- 用js实现页面布局的滑动门和TAB
- js实现的瀑布流布局
- 数组例子2:二维数组中的行列互换和按钮控件数组实现计算器界面(暂不支持计算功能,仅界面及简单输入)
- js实现时间控件
- 鼠标浮动过按钮实现立体按钮的效果哦,不需要用JS~~~纯CSS
- JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】