js获取单选框或复选框值及操作

  

复制代码 代码如下:

  <script>

  function checkbox()

  {

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

  var objarray=str.length;

  var chestr="";

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

  {//欢迎来到管理资源吧,我们的网址是www.glzy8.com,很好记,管理资源吧,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。

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

  {

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

  }

  }//欢迎来到管理资源吧,我们的网址是www.glzy8.com,很好记,管理资源吧,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。

  if(chestr == "")

  {

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

  }

  else

  {

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

  }

  }

  </script>

  <a href="<#ZC_BLOG_HOST#>">管理资源吧</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>

  <!--欢迎来到管理资源吧,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.glzy8.com,,用.net打造靓站-->

  选择您的爱好:

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

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

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

  <input type="button" name="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" 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>