javascript ,checkbox


<!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获取单选框、复选框的值及操作</title>

</head>

<body>

<div 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" >提交</button>

</div>

<div>

<input type="checkbox" value="前年"/><label>前年</label>

<input type="checkbox" value="去年"/><label>去年</label>

<input type="checkbox" value="今年"/><label>今年</label>

<input type="checkbox" value="明年"/><label>明年</label>

<input type="checkbox" value="后年"/><label>后年</label>

<button type="button" >提交</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>

相关文章
相关标签/搜索