用 Javascript 驗(yàn)證表單(form)中多選框(checkbox)值
更新時(shí)間：2009年09月08日 20:46:08 作者：
和單選框一樣，許多新手在用 Javascript 驗(yàn)證表單（form）中多選框（checkbox）的值時(shí)，都會(huì)遇到問題，原因是 checkbox 和普通的文本框在獲取值的時(shí)候有很大不同
本文介紹了一個(gè)較為通用的獲取 checkbox 值的方法，希望對(duì)新手有用。
<script type="text/javascript">
// 說明： 用 Javascript 驗(yàn)證表單（form）中多選框（checkbox）的值
// 作者： CodeBit
function getCheckboxValue(checkbox)
{
if (!checkbox.length && checkbox.type.toLowerCase() == 'checkbox')
{ return (checkbox.checked)?checkbox.value:''; }
if (checkbox[0].tagName.toLowerCase() != 'input' ||
checkbox[0].type.toLowerCase() != 'checkbox')
{ return ''; }
var val = [];
var len = checkbox.length;
for(i=0; i<len; i++)
{
if (checkbox[i].checked)
{
val[val.length] = checkbox[i].value;
}
}
return (val.length)?val:'';
}
</script>
和 radio 一樣，都是 name 相同，值有多個(gè)，在獲取 checkbox 值的時(shí)候，我們不能按照普通文本框 .value 的方式，而是要判斷哪個(gè)被選中了。
當(dāng)一組 checkbox 有多個(gè)選項(xiàng)時(shí)，我們可以通過循環(huán)，以 checkbox[i] 的方式判斷某個(gè)選項(xiàng)是否被選中來返回值，但是當(dāng)一組 checkbox 只有一個(gè)選項(xiàng)時(shí)，獲取值的方式又有變化，代碼中以 (checkbox.checked)?checkbox.value:''; 的方式直接判斷是否選中，然后返回對(duì)應(yīng)值。
上面的代碼傳入的參數(shù)是 checkbox 對(duì)象，如：
var checkboxTest = document.forms['testForm'].elements['checkboxTest'];
if (getCheckboxValue(checkboxTest) == '')
{ ...... }
根據(jù)判斷結(jié)果執(zhí)行你想要的操作。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
// 說明： 用 Javascript 驗(yàn)證表單（form）中多選框（checkbox）的值
// 作者： CodeBit
function getCheckboxValue(checkbox)
{
if (!checkbox.length && checkbox.type.toLowerCase() == 'checkbox')
{ return (checkbox.checked)?checkbox.value:''; }
if (checkbox[0].tagName.toLowerCase() != 'input' ||
checkbox[0].type.toLowerCase() != 'checkbox')
{ return ''; }
var val = [];
var len = checkbox.length;
for(i=0; i<len; i++)
{
if (checkbox[i].checked)
{
val[val.length] = checkbox[i].value;
}
}
return (val.length)?val:'';
}
</script>
和 radio 一樣，都是 name 相同，值有多個(gè)，在獲取 checkbox 值的時(shí)候，我們不能按照普通文本框 .value 的方式，而是要判斷哪個(gè)被選中了。
當(dāng)一組 checkbox 有多個(gè)選項(xiàng)時(shí)，我們可以通過循環(huán)，以 checkbox[i] 的方式判斷某個(gè)選項(xiàng)是否被選中來返回值，但是當(dāng)一組 checkbox 只有一個(gè)選項(xiàng)時(shí)，獲取值的方式又有變化，代碼中以 (checkbox.checked)?checkbox.value:''; 的方式直接判斷是否選中，然后返回對(duì)應(yīng)值。
上面的代碼傳入的參數(shù)是 checkbox 對(duì)象，如：
復(fù)制代碼 代碼如下:
var checkboxTest = document.forms['testForm'].elements['checkboxTest'];
if (getCheckboxValue(checkboxTest) == '')
{ ...... }
根據(jù)判斷結(jié)果執(zhí)行你想要的操作。
相關(guān)文章
這篇文章主要介紹了Css3制作變形與動(dòng)畫效果，css3制作動(dòng)畫主要用到：變形(transform)，過渡(transition)和動(dòng)畫(animation)三個(gè)屬性,需要的朋友可以參考下2015-07-07
autocomplete禁止自動(dòng)完成功能...2007-06-06
textarea保留換行的注意事項(xiàng)...2007-08-08
sina的lightbox效果。...2007-01-01
multibox 全選實(shí)現(xiàn)代碼。跟checkbox等原理是一樣的2009-03-03
用javascript實(shí)現(xiàn)select的美化的方法
用javascript實(shí)現(xiàn)select的美化的方法...2007-04-04
input 文本框內(nèi)容改變，我們可以使用onchange或者onblur來進(jìn)行判斷，但是onchange是在文本內(nèi)容改變，然后失去焦點(diǎn)的時(shí)候發(fā)生，onblur是在失去焦點(diǎn)時(shí)候發(fā)生，不會(huì)自己去判斷。2010-04-04
用Javascript讀取CheckBox數(shù)組的值的代碼(兼容IE與firefox)
為了同時(shí)支持Firefox和IE，我們常常用document.getElementById(id)方法來取得HTML對(duì)象。但是getElementById方法只能取得單個(gè)對(duì)象，而對(duì)于CheckBox數(shù)組則無能為力。2010-12-12
讓html的text輸入框只能輸入數(shù)字和1個(gè)小數(shù)點(diǎn)(0-59之間可改)
今天有同事需要這個(gè)功能，主要是限制用戶輸入不符合規(guī)范的數(shù)字與小數(shù)點(diǎn)導(dǎo)致不好計(jì)算價(jià)格問題，特整理了下面的代碼，需要的朋友可以參考下。2011-11-11
select選擇事件問題...2007-02-02