js布局实现单选按钮控件


Posted in Javascript onJanuary 17, 2020

本文实例为大家分享了javascript布局实现单选按钮控件的具体代码,供大家参考,具体内容如下

主要是对最近学习的知识做练习,可以巩固提高!

效果如下图:

js布局实现单选按钮控件

代码如下:

<!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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
js实现简单抽奖功能
Nov 24 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue 查看dist文件里的结构(多种方式)
Jan 17 #Javascript
JavaScript数组去重实现方法小结
Jan 17 #Javascript
JS面向对象之多选框实现
Jan 17 #Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 #Javascript
JS面向对象之单选框实现
Jan 17 #Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 #Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 #Javascript
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php递归创建目录的方法
2015/02/02 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
tornado 多进程模式解析
2018/01/15 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
中国梦口号
2014/06/13 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
大国崛起英国观后感
2015/06/02 职场文书
团队拓展训练感想
2015/08/07 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
使用HttpSessionListener监听器实战
2022/03/17 Java/Android