js布局如何实现单选按钮控件

小编给大家分享一下js布局如何实现单选按钮控件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

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

效果如下图：

代码如下：

.radioD{
width:300px;
height:300px;
background:url(field.jpg)no-repeat;
}
.radioDli{
font-size:18px;
font-family:Arial;
list-style:none;
}
.leftU{
float:left;
}
.rightU{
float:right;
margin-right:80px;
}


window.onload=function(){
varaLi=document.getElementsByTagName('li');
varaInput=document.getElementsByTagName('input');
vari=0;
varbtn=document.getElementById('foodBtn');
btn.onclick=function(){
for(i=0;i




面条1
馒头1
烧饼1
窝头1


面条2
馒头2
烧饼2
窝头2

我的食物