用 Javascript 驗(yàn)證表單(form)中的單選(radio)值
更新時(shí)間：2009年09月08日 20:49:14 作者：
在用 Javascript 驗(yàn)證表單（form）中的單選框（radio）是否選中時(shí)，很多新手都會(huì)遇到問題，原因是 radio 和普通的文本框在獲取值的時(shí)候有很大不同.
本文介紹了一個(gè)較為通用的獲取 radio 值的方法，希望對(duì)新手有用。
<script type="text/javascript">
// 說明： 用 Javascript 驗(yàn)證表單（form）中的單選（radio）值
// 作者： CodeBit
function getRadioValue(radio)
{
if (!radio.length && radio.type.toLowerCase() == 'radio')
{ return (radio.checked)?radio.value:''; }
if (radio[0].tagName.toLowerCase() != 'input' ||
radio[0].type.toLowerCase() != 'radio')
{ return ''; }
var len = radio.length;
for(i=0; i<len; i++)
{
if (radio[i].checked)
{
return radio[i].value;
}
}
return '';
}
</script>
radio 和 checkbox 一樣，都是 name 相同，值有多個(gè)，在獲取 radio 值的時(shí)候，我們不能按照普通文本框 .value 的方式，而是要判斷哪個(gè)被選中了。
當(dāng)一組 radio 有多個(gè)選項(xiàng)時(shí)，我們可以通過循環(huán)，以 radio[i] 的方式判斷某個(gè)選項(xiàng)是否被選中來返回值，但是當(dāng)一組 radio 只有一個(gè)選項(xiàng)時(shí)，獲取值的方式又有變化，代碼中以 return (radio.checked)?radio.value:''; 這樣的方式直接判斷是否選中，然后返回對(duì)應(yīng)值。
上面的代碼傳入的參數(shù)是 radio 對(duì)象，如：
var radioTest = document.forms['testForm'].elements['radioTest'];
if (getRadioValue(radioTest) == '')
{ ...... }
根據(jù)判斷結(jié)果執(zhí)行你想要的操作。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
// 說明： 用 Javascript 驗(yàn)證表單（form）中的單選（radio）值
// 作者： CodeBit
function getRadioValue(radio)
{
if (!radio.length && radio.type.toLowerCase() == 'radio')
{ return (radio.checked)?radio.value:''; }
if (radio[0].tagName.toLowerCase() != 'input' ||
radio[0].type.toLowerCase() != 'radio')
{ return ''; }
var len = radio.length;
for(i=0; i<len; i++)
{
if (radio[i].checked)
{
return radio[i].value;
}
}
return '';
}
</script>
radio 和 checkbox 一樣，都是 name 相同，值有多個(gè)，在獲取 radio 值的時(shí)候，我們不能按照普通文本框 .value 的方式，而是要判斷哪個(gè)被選中了。
當(dāng)一組 radio 有多個(gè)選項(xiàng)時(shí)，我們可以通過循環(huán)，以 radio[i] 的方式判斷某個(gè)選項(xiàng)是否被選中來返回值，但是當(dāng)一組 radio 只有一個(gè)選項(xiàng)時(shí)，獲取值的方式又有變化，代碼中以 return (radio.checked)?radio.value:''; 這樣的方式直接判斷是否選中，然后返回對(duì)應(yīng)值。
上面的代碼傳入的參數(shù)是 radio 對(duì)象，如：
復(fù)制代碼 代碼如下:
var radioTest = document.forms['testForm'].elements['radioTest'];
if (getRadioValue(radioTest) == '')
{ ...... }
根據(jù)判斷結(jié)果執(zhí)行你想要的操作。
您可能感興趣的文章:
- Js得到radiobuttonlist選中值的兩種方法(推薦)
- js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法
- js獲取RadioButtonList的Value/Text及選中值等信息實(shí)現(xiàn)代碼
- javascript RadioButtonList獲取選中值
- js中獲取jsp表單中radio類型的值簡(jiǎn)單實(shí)例
- JavaScript中獲取Radio被選中的值
- js獲取 type=radio 值的方法
- JS 如何獲取radio選中后的值及不選擇取radio的值
- 用js的for循環(huán)獲取radio選中的值
- js 獲取radio按鈕值的實(shí)例
- javascript radio值獲取代碼
- JavaScript獲取radio選中值的幾種常用方法小結(jié)
相關(guān)文章
JavaScript Select和Option列表元素上下左右移動(dòng)
支持一次選中多項(xiàng)在左右列表中來回移動(dòng)2008-12-12
javascript 字節(jié)長(zhǎng)度 限制輸入實(shí)現(xiàn)代碼，也算個(gè)不錯(cuò)的方法，腳本之家以前曾發(fā)布過類型的功能代碼。2010-01-01
js動(dòng)態(tài)在form上插入enctype=multipart/form-data的問題
在做文件上傳的時(shí)候碰到了一個(gè)比較奇怪的問題，IE6，7，8上傳文件總是失敗，服務(wù)端接收不到文件的問題2012-05-05
javascript獲得光標(biāo)所在的文本框(text/textarea)中的位置
移動(dòng)鼠標(biāo)，得到單元格所在表中的位置的js代碼,測(cè)試兼容firefox,需要的朋友可以參考下。2009-12-12
我們有時(shí)候希望回車鍵敲在文本框（input element）里來提交表單（form），但有時(shí)候又不希望如此。2010-04-04
javascript 單選按鈕 單擊選中 雙擊取消選擇實(shí)現(xiàn)代碼
很多情況下，我們需要對(duì)radio單選框?qū)崿F(xiàn)取消選擇，這里用js的實(shí)現(xiàn)方法，確實(shí)不錯(cuò)。2010-08-08
每次都要用到表單驗(yàn)證的時(shí)候，就在到處找東西，而網(wǎng)上的很多都不見的好用。自己終于累計(jì)了這些方法，在自己的程序中使用了的一些方法，肯定是好用的，主要使用了簡(jiǎn)單的正則表達(dá)式進(jìn)行判斷。如果有bug，歡迎提出來。2009-04-04
javascript TextArea動(dòng)態(tài)顯示剩余字符
TextArea動(dòng)態(tài)顯示輸入剩余字符2008-10-10
select列表內(nèi)容交換的js實(shí)現(xiàn)代碼
js實(shí)現(xiàn)左右select列表內(nèi)容交換傳遞，原來就是先獲取當(dāng)期選中select的值，然后添加到對(duì)面的select中，然后刪除選中內(nèi)容。2009-12-12
javascritp實(shí)現(xiàn)input輸入框相關(guān)限制用法
javascritp實(shí)現(xiàn)input輸入框相關(guān)限制用法...2007-06-06