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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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生成网页桌面快捷方式
2017/05/05 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Vue实现table上下移动功能示例
2019/02/21 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python随机数random模块使用指南
2016/09/09 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
《藏戏》教学反思
2014/02/11 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
2014年教务工作总结
2014/12/03 职场文书
党员个人总结范文
2015/02/14 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
大学感恩节活动总结
2015/05/05 职场文书
新闻稿怎么写
2015/07/18 职场文书
纪律委员竞选稿
2015/11/19 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
Python 图片添加美颜效果
2022/04/28 Python