js布局實(shí)現(xiàn)單選按鈕控件
更新時(shí)間：2020年01月17日 11:59:37 作者：唐小狼
這篇文章主要為大家詳細(xì)介紹了js布局實(shí)現(xiàn)單選按鈕控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript布局實(shí)現(xiàn)單選按鈕控件的具體代碼，供大家參考，具體內(nèi)容如下
主要是對(duì)最近學(xué)習(xí)的知識(shí)做練習(xí)，可以鞏固提高！
效果如下圖：
代碼如下：
<!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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js獲取單選按鈕的數(shù)據(jù)
- js簡(jiǎn)單獲取表單中單選按鈕值的方法
- JSP單選按鈕驗(yàn)證、下拉框驗(yàn)證、復(fù)選框驗(yàn)證實(shí)現(xiàn)代碼
- Vue.js表單標(biāo)簽中的單選按鈕、復(fù)選按鈕和下拉列表的取值問題
- js取消單選按鈕選中示例代碼
- javascript 單選按鈕 單擊選中 雙擊取消選擇實(shí)現(xiàn)代碼
- JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法
- js使用DOM設(shè)置單選按鈕、復(fù)選框及下拉菜單的方法
- js實(shí)現(xiàn)不提交表單獲取單選按鈕值的方法
- JS獲取下拉框顯示值和判斷單選按鈕的方法
相關(guān)文章
![我也種棵OO樹JXTree[js+css+xml]](http://img.jbzj.com/images/xgimg/bcimg0.png)
我也種棵OO樹JXTree[js+css+xml]...2007-04-04
JavaScript實(shí)現(xiàn)格式化字符串函數(shù)String.format
本文主要介紹了JavaScript實(shí)現(xiàn)格式化字符串函數(shù)String.format（可自動(dòng)解析引號(hào)轉(zhuǎn)義字符）。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法
這篇文章主要介紹了JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法,涉及javascript綁定onclick的基本技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
事件循環(huán)是?JavaScript?中一個(gè)非常重要的概念，下面就來(lái)看看瀏覽器和?Node.js?中的事件循環(huán)的原理，以及兩者之間的差異，感興趣的可以了解一下2022-10-10
這篇文章主要介紹了微信小程序使用 vant Dialog組件的正確方式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
聊聊Javascript中try catch的2個(gè)作用
try...catch 可以測(cè)試代碼中的錯(cuò)誤,try 部分包含需要運(yùn)行的代碼,而catch部分包含錯(cuò)誤發(fā)生時(shí)運(yùn)行的代碼,這篇文章主要給大家介紹了關(guān)于Javascript中try catch的2個(gè)作用,需要的朋友可以參考下2021-09-09
javascript實(shí)現(xiàn)支持移動(dòng)設(shè)備畫廊
本文通過(guò)純javascript技術(shù)實(shí)現(xiàn)支持移動(dòng)設(shè)備畫廊，支持移動(dòng)設(shè)備手勢(shì)操作，感興趣的朋友一起來(lái)學(xué)習(xí)吧2015-08-08
在本章中，我們將分析Prototypejs中關(guān)于JavaScript繼承的實(shí)現(xiàn),需要的朋友可以參考下2016-10-10
JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹
這篇文章主要介紹了JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹,本文講解了object自動(dòng)轉(zhuǎn)換成string的規(guī)則、object自動(dòng)轉(zhuǎn)換成number的規(guī)則等內(nèi)容,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js中的內(nèi)部屬性與delete操作符的相關(guān)資料,需要的朋友可以參考下2015-08-08