昆明java培训
达内昆明广州春城路

18487146383

热门课程

昆明java培训——js获取单选框或复选框值及操作

  • 时间:2016-04-15
  • 发布:昆明Java培训
  • 来源:达内新闻

在实际应用中,偶尔会用到复选框checkbox的值,那么如何获取它的值呢?昆明java培训中心会介绍使用js获取复选框值,需要的同学可以了解下:

代码如下:

<script>

function checkbox()

{

var str=document.getElementsByName("box");

var objarray=str.length;

var chestr="";

for (i=0;i<objarray;i++)

if(str[i].checked == true)

{

chestr+=str[i].value+",";

}

if(chestr == "")

{

alert("请先选择一个爱好~!");

}

else

{

alert("您先择的是:"+chestr);

}

}

</script>

选择您的爱好:

<input type="checkbox" ame="box" id="box1" value="跳水" />跳水

<input type="checkbox" ame="box" id="box2" value="跑步" />跑步

<input type="checkbox" ame="box" id="box3" value="听音乐" />听音乐

<input type="button" ame="button" id="button" onclick="checkbox()" value="提交" />

代码如下:

<!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 class="d0">

<input type="radio" ame="day" id="r0" value="前天"/><label for="r0">前天</label>

<input type="radio" ame="day" id="r1" value="昨天"/><label for="r1">昨天</label>

<input type="radio" ame="day" id="r2" checked="checked" value="今天"/><label for="r2">今天</label>

<input type="radio" ame="day" id="r3" value="明天"/><label for="r3">明天</label>

<input type="radio" ame="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>

单选框和复选框对于很多新手来说可能觉得意义不是很大,但是考虑到后期系统使用的便捷性以及工作效率考虑,你现在的一个选择,关乎到以后的使用哦,在选择上有不懂得,欢迎咨询昆明java培训机构

上一篇:Android中的资源是指非代码部分,指外部文件。
下一篇:js利用控件对windows的操作实现原理

js利用控件对windows的操作实现原理

昆明java培训——js获取单选框或复选框值及操作

Android中的资源是指非代码部分,指外部文件。

js判断一个值在数组中

选择城市和中心
贵州省

广西省

海南省

台湾