js佈局實現單選按鈕控制元件
阿新 • • 發佈：2020-01-18
本文例項為大家分享了javascript佈局實現單選按鈕控制元件的具體程式碼，供大家參考，具體內容如下
主要是對最近學習的知識做練習，可以鞏固提高！
效果如下圖：
程式碼如下：
<!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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。