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 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 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
php实现字符串反转输出的方法
2015/03/14 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
javascript的内存管理详解
2013/08/07 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python hashlib加密实现代码
2019/10/17 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
幼儿教师考核制度
2014/01/25 职场文书
英文道歉信
2015/01/20 职场文书
毕业实习证明范本
2015/06/16 职场文书
情感电台广播稿
2015/08/18 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang