快捷導(dǎo)航

js獲取單選框或復(fù)選框值及操作

更新時間：2012年12月18日 15:09:13 作者：

在實際應(yīng)用中，偶爾會用到復(fù)選框checkbox的值,那么如何獲取它的值呢？本文接下來會介紹使用js獲取復(fù)選框值,需要的朋友可以了解下

 
<script> 
function checkbox() 
{ 
var str=document.getElementsByName("box"); 
var objarray=str.length; 
var chestr=""; 
for (i=0;i<objarray;i++) 
{//歡迎來到腳本之家，我們的網(wǎng)址是m.fzitv.net，很好記，腳本之家，js就是js特效，本站收集大量高質(zhì)量js代碼，還有許多廣告代碼下載。 
if(str[i].checked == true) 
{ 
chestr+=str[i].value+","; 
} 
}//歡迎來到腳本之家，我們的網(wǎng)址是m.fzitv.net，很好記，腳本之家，js就是js特效，本站收集大量高質(zhì)量js代碼，還有許多廣告代碼下載。 
if(chestr == "") 
{ 
alert("請先選擇一個愛好～！"); 
} 
else 
{ 
alert("您先擇的是："+chestr); 
} 
} 
</script> 
<a href="<#ZC_BLOG_HOST#>">腳本之家</a>,站長必備的高質(zhì)量網(wǎng)頁特效和廣告代碼。zzjs.net，站長js特效。<hr> 
<!--歡迎來到腳本之家，我們網(wǎng)站收集大量高質(zhì)量js特效，提供許多廣告代碼下載，網(wǎng)址：m.fzitv.net，,用.net打造靚站--> 
選擇您的愛好： 
<input type="checkbox" name="box" id="box1" value="跳水" />跳水 
<input type="checkbox" name="box" id="box2" value="跑步" />跑步 
<input type="checkbox" name="box" id="box3" value="聽音樂" />聽音樂 
<input type="button" name="button" id="button" onclick="checkbox()" value="提交" /> 

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="all"> 
label{ 
cursor:pointer; 
font-size:12px; 
margin:0px 2px 0px 0px; 
color:#2B86BD; 
} 
.d0{ 
margin-bottom:30px; 
} 
.d0 input{ 
cursor:pointer; 
margin:0px; 
padding:0px 2px; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
var dr=document.getElementsByTagName("div"),i,t=""; 
function submit1(num,type){ 
t=""; 
var dri=dr[num].getElementsByTagName("input"); 
for(i=0;i<dri.length;i++){ 
if(dri[i].checked){ 
if(type==0){ 
alert(dri[i].value); 
break; 
}else{ 
t=t+dri[i].value+";"; 
} 
} 
} 
if(type==1) alert(t); 
} 
//ChangeSelect 
submit1.allselect=function(){ 
var drc=dr[1].getElementsByTagName("input"); 
for(i=0;i<drc.length;i++){ 
drc[i].checked=true; 
} 
} 
//allNot 
submit1.allNot=function(){ 
var drc=dr[1].getElementsByTagName("input"); 
for(i=0;i<drc.length;i++){ 
drc[i].checked=false; 
} 
} 
//reverse 
submit1.reverseSelect=function(){ 
var drc=dr[1].getElementsByTagName("input"); 
for(i=0;i<drc.length;i++){ 
if(drc[i].checked){ 
drc[i].checked=false; 
}else{ 
drc[i].checked=true; 
} 
} 
} 
</script> 
<title>js獲取單選框、復(fù)選框的值及操作</title> 
</head> 
<body> 
<div class="d0"> 
<input type="radio" name="day" id="r0" value="前天"/><label for="r0">前天</label> 
<input type="radio" name="day" id="r1" value="昨天"/><label for="r1">昨天</label> 
<input type="radio" name="day" id="r2" checked="checked" value="今天"/><label for="r2">今天</label> 
<input type="radio" name="day" id="r3" value="明天"/><label for="r3">明天</label> 
<input type="radio" name="day" id="r4" value="后天"/><label for="r4">后天</label> 
<button type="button" onclick="submit1(0,0)" >提交</button> 
</div> 
<div> 
<input type="checkbox" value="前年" onclick="alert(this.value);"/><label>前年</label> 
<input type="checkbox" value="去年" onclick="submit1(1,1);"/><label>去年</label> 
<input type="checkbox" value="今年" /><label>今年</label> 
<input type="checkbox" value="明年"/><label>明年</label> 
<input type="checkbox" value="后年"/><label>后年</label> 
<button type="button" onclick="submit1(1,1)" >提交</button> 
<button type="button" onclick="submit1.allselect()" >全選</button> 
<button type="button" onclick="submit1.reverseSelect()" >反選</button> 
<button type="button" onclick="submit1.allNot()" >全不選</button> 
</div> 
</body> 
</html> 