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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
浅谈JS的二进制家族
May 09 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python格式化css文件的方法
2015/03/10 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python 处理数据的实例详解
2017/08/10 Python
git进行版本控制心得详谈
2017/12/10 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
深入分析python 排序
2020/08/24 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
中学教师教育感言
2014/02/21 职场文书
聚美优品励志广告词
2014/03/14 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书