单选框、复选框的取值跟判断(radio,checkbox,javascript)
日期：2014-05-16 浏览次数：20508 次
单选框、复选框的取值和判断(radio,checkbox,javascript)
<!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;
}
.mb{
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++){drc[i].checked = !drc[i].checked;}
}
//select
function selectResult(){
var sid=document.getElementsByTagName("select")[1].getElementsByTagName("option");
var iid=document.getElementsByTagName("select")[1].options.selectedIndex;
var sid2=document.getElementsByTagName("select")[0].getElementsByTagName("option");
var iid2=document.getElementsByTagName("select")[0].options.selectedIndex;
alert(sid2[iid2].innerHTML+";"+sid[iid].innerHTML);
}
</script>
<title>js获取单选框、复选框的值及操作</title>
</head>
<body>
<div class="d0 mb">
<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 class="mb">
<input type="checkbox" value="前年" id="c1" /><label for="c1">前年</label>
<input type="checkbox" value="去年" id="c2" /><label for="c2">去年</label>
<input type="checkbox" value="今年" id="c3"/><label for="c3">今年</label>
<input type="checkbox" value="明年" id="c4"/><label for="c4">明年</label>
<input type="checkbox" value="后年" id="c5"/><label for="c5">后年</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>
<div>
<select onchange="javascript:alert('你选择的是第'+(parseInt(this.options.selectedIndex)+1)+'个')">
<optgroup label="China">
<option>Beijing</option>
<option>Shanghai</option>
<opt
<!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;
}
.mb{
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++){drc[i].checked = !drc[i].checked;}
}
//select
function selectResult(){
var sid=document.getElementsByTagName("select")[1].getElementsByTagName("option");
var iid=document.getElementsByTagName("select")[1].options.selectedIndex;
var sid2=document.getElementsByTagName("select")[0].getElementsByTagName("option");
var iid2=document.getElementsByTagName("select")[0].options.selectedIndex;
alert(sid2[iid2].innerHTML+";"+sid[iid].innerHTML);
}
</script>
<title>js获取单选框、复选框的值及操作</title>
</head>
<body>
<div class="d0 mb">
<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 class="mb">
<input type="checkbox" value="前年" id="c1" /><label for="c1">前年</label>
<input type="checkbox" value="去年" id="c2" /><label for="c2">去年</label>
<input type="checkbox" value="今年" id="c3"/><label for="c3">今年</label>
<input type="checkbox" value="明年" id="c4"/><label for="c4">明年</label>
<input type="checkbox" value="后年" id="c5"/><label for="c5">后年</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>
<div>
<select onchange="javascript:alert('你选择的是第'+(parseInt(this.options.selectedIndex)+1)+'个')">
<optgroup label="China">
<option>Beijing</option>
<option>Shanghai</option>
<opt
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
