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 相关文章推荐
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
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
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python创建xml的方法
2015/03/10 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
详解Python中的文件操作
2016/08/28 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
聊聊Python中的pypy
2018/01/12 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python continue继续循环用法总结
2018/06/10 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
白色公司:The White Company
2017/10/11 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
会计毕业生求职简历的自我评价
2013/10/20 职场文书
幼师自我鉴定
2014/02/01 职场文书
小学英语教学反思案例
2014/02/04 职场文书
先进工作者事迹材料
2014/12/23 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
python如何查找列表中元素的位置
2022/05/30 Python