单选框、复选框的取值和判断(radio,checkbox,javascript)

最新推荐文章于 2020-04-01 13:47:38 发布

stevenbill

最新推荐文章于 2020-04-01 13:47:38 发布

阅读量342

点赞数

分类专栏： JAVA 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/stevenbill/article/details/83835105

版权

JAVA 专栏收录该内容

332 篇文章 1 订阅

订阅专栏

<!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" οnclick="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" οnclick="submit1(1,1)" >提交</button>
<button type="button" οnclick="submit1.allselect()" >全选</button>
<button type="button" οnclick="submit1.reverseSelect()" >反选</button>
<button type="button" οnclick="submit1.allNot()" >全不选</button>
</div>
<div>
<select οnchange="javascript:alert('你选择的是第'+(parseInt(this.options.selectedIndex)+1)+'个')">
<optgroup label="China">
<option>Beijing</option>
<option>Shanghai</option>
<option>Guangzhou</option>
</optgroup>
<optgroup label="World">
<option>China</option>
<option>Brazil</option>
<option>Sweden</option>
</optgroup>
</select>
<select>
<optgroup label="中国">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</optgroup>
<optgroup label="世界">
<option>中国</option>
<option>巴西</option>
<option>瑞典</option>
</optgroup>
</select>
<button type="button" οnclick="selectResult()">提交</button>
</div>
</body>
</html>