用 Javascript 驗證表單(form)中的單選(radio)值
更新時間:2009年09月08日 20:49:14 作者:
在用 Javascript 驗證表單(form)中的單選框(radio)是否選中時,很多新手都會遇到問題,原因是 radio 和普通的文本框在獲取值的時候有很大不同.
本文介紹了一個較為通用的獲取 radio 值的方法,希望對新手有用。
<script type="text/javascript">
// 說明: 用 Javascript 驗證表單(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 相同,值有多個,在獲取 radio 值的時候,我們不能按照普通文本框 .value 的方式,而是要判斷哪個被選中了。
當(dāng)一組 radio 有多個選項時,我們可以通過循環(huán),以 radio[i] 的方式判斷某個選項是否被選中來返回值,但是當(dāng)一組 radio 只有一個選項時,獲取值的方式又有變化,代碼中以 return (radio.checked)?radio.value:''; 這樣的方式直接判斷是否選中,然后返回對應(yīng)值。
上面的代碼傳入的參數(shù)是 radio 對象,如:
var radioTest = document.forms['testForm'].elements['radioTest'];
if (getRadioValue(radioTest) == '')
{ ...... }
根據(jù)判斷結(jié)果執(zhí)行你想要的操作。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
// 說明: 用 Javascript 驗證表單(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 相同,值有多個,在獲取 radio 值的時候,我們不能按照普通文本框 .value 的方式,而是要判斷哪個被選中了。
當(dāng)一組 radio 有多個選項時,我們可以通過循環(huán),以 radio[i] 的方式判斷某個選項是否被選中來返回值,但是當(dāng)一組 radio 只有一個選項時,獲取值的方式又有變化,代碼中以 return (radio.checked)?radio.value:''; 這樣的方式直接判斷是否選中,然后返回對應(yīng)值。
上面的代碼傳入的參數(shù)是 radio 對象,如:
復(fù)制代碼 代碼如下:
var radioTest = document.forms['testForm'].elements['radioTest'];
if (getRadioValue(radioTest) == '')
{ ...... }
根據(jù)判斷結(jié)果執(zhí)行你想要的操作。
您可能感興趣的文章:
- Js得到radiobuttonlist選中值的兩種方法(推薦)
- js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實現(xiàn)方法
- js獲取RadioButtonList的Value/Text及選中值等信息實現(xiàn)代碼
- javascript RadioButtonList獲取選中值
- js中獲取jsp表單中radio類型的值簡單實例
- JavaScript中獲取Radio被選中的值
- js獲取 type=radio 值的方法
- JS 如何獲取radio選中后的值及不選擇取radio的值
- 用js的for循環(huán)獲取radio選中的值
- js 獲取radio按鈕值的實例
- javascript radio值獲取代碼
- JavaScript獲取radio選中值的幾種常用方法小結(jié)
相關(guān)文章
用javascript將數(shù)據(jù)庫中的TEXT類型數(shù)據(jù)動態(tài)賦值到TEXTAREA中
用javascript將數(shù)據(jù)庫中的TEXT類型數(shù)據(jù)動態(tài)賦值到TEXTAREA中...2007-04-04模擬用戶操作Input元素,不會觸發(fā)相應(yīng)事件
模擬用戶操作Input元素,不會觸發(fā)相應(yīng)事件...2007-05-05用javascript來實現(xiàn)select標(biāo)簽的美化的代碼
用javascript來實現(xiàn)select標(biāo)簽的美化的代碼...2007-10-10javascript之文本框輸入四個數(shù)字自動加空格的腳本
javascript之文本框輸入四個數(shù)字自動加空格的腳本...2007-11-11同一個表單 根據(jù)要求遞交到不同頁面的實現(xiàn)方法小結(jié)
同一個表單 根據(jù)要求遞交到不同頁面的實現(xiàn)方法,就是好多網(wǎng)站,可以百度一個表單可以搜索音樂,圖片等2009-08-08