js獲取單選框或復(fù)選框值及操作
更新時(shí)間:2012年12月18日 15:09:13 作者:
在實(shí)際應(yīng)用中,偶爾會(huì)用到復(fù)選框checkbox的值,那么如何獲取它的值呢?本文接下來(lái)會(huì)介紹使用js獲取復(fù)選框值,需要的朋友可以了解下
復(fù)制代碼 代碼如下:
<script>
function checkbox()
{
var str=document.getElementsByName("box");
var objarray=str.length;
var chestr="";
for (i=0;i<objarray;i++)
{//歡迎來(lái)到腳本之家,我們的網(wǎng)址是www.dbjr.com.cn,很好記,腳本之家,js就是js特效,本站收集大量高質(zhì)量js代碼,還有許多廣告代碼下載。
if(str[i].checked == true)
{
chestr+=str[i].value+",";
}
}//歡迎來(lái)到腳本之家,我們的網(wǎng)址是www.dbjr.com.cn,很好記,腳本之家,js就是js特效,本站收集大量高質(zhì)量js代碼,還有許多廣告代碼下載。
if(chestr == "")
{
alert("請(qǐng)先選擇一個(gè)愛(ài)好~!");
}
else
{
alert("您先擇的是:"+chestr);
}
}
</script>
<a href="<#ZC_BLOG_HOST#>">腳本之家</a>,站長(zhǎng)必備的高質(zhì)量網(wǎng)頁(yè)特效和廣告代碼。zzjs.net,站長(zhǎng)js特效。<hr>
<!--歡迎來(lái)到腳本之家,我們網(wǎng)站收集大量高質(zhì)量js特效,提供許多廣告代碼下載,網(wǎng)址:www.dbjr.com.cn,,用.net打造靚站-->
選擇您的愛(ài)好:
<input type="checkbox" name="box" id="box1" value="跳水" />跳水
<input type="checkbox" name="box" id="box2" value="跑步" />跑步
<input type="checkbox" name="box" id="box3" value="聽(tīng)音樂(lè)" />聽(tīng)音樂(lè)
<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>
您可能感興趣的文章:
- 在js中單選框和復(fù)選框獲取值的方式
- js checkbox(復(fù)選框) 使用集錦
- Js動(dòng)態(tài)添加復(fù)選框Checkbox的實(shí)例方法
- javascript判斷單選框或復(fù)選框是否選中方法集錦
- JavaScript簡(jiǎn)單判斷復(fù)選框是否選中及取出值的方法
- JS實(shí)現(xiàn)復(fù)選框的全選和批量刪除功能
- JS獲取復(fù)選框的值,并傳遞到后臺(tái)的實(shí)現(xiàn)方法
- javascript動(dòng)態(tài)添加checkbox復(fù)選框的方法
- JS實(shí)現(xiàn)CheckBox復(fù)選框全選全不選功能
- js中復(fù)選框的取值及賦值示例詳解
相關(guān)文章
在JavaScript中使用開(kāi)平方根的sqrt()方法
這篇文章主要介紹了在JavaScript中使用開(kāi)平方根的sqrt()方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06javascript中FOREACH數(shù)組方法使用示例
本文給大家介紹的是Array.prototype.forEach()的使用方法示例,希望對(duì)大家學(xué)習(xí)javascript能夠有所幫助。2016-03-03解決js正則匹配換行問(wèn)題實(shí)現(xiàn)代碼
js正則匹配換行過(guò)程中會(huì)出現(xiàn)很多的問(wèn)題,本文將提供詳細(xì)的解決方法,需要的朋友可以參考下2012-12-12基于js 字符串indexof與search方法的區(qū)別(詳解)
下面小編就為大家分享一篇基于js 字符串indexof與search方法的區(qū)別介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12