js 和jquery 操作radio 和checkbox

来源:互联网 发布:2017qq空间淘宝客推广 编辑:程序博客网 时间:2024/04/30 05:13

1.获取和设置select,checkbox,radio的值

<!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>
</head>
<body>
复选框:
<input type="checkbox" name="checkbox1" value="1" checked/>1
<input type="checkbox" name="checkbox1" value="2"/>2
<input type="checkbox" name="checkbox1" value="3" checked/>3
<input type="checkbox" name="checkbox1" value="4"/>4
<input type="checkbox" name="checkbox1" value="5"/>5

<br/>

单选框:
<input type="radio" id="radio1" name="radio1" value="1" checked>1
<input type="radio" id="radio1" name="radio1" value="2">2
<input type="radio" id="radio1" name="radio1" value="3">3
<br/>
下拉框:
<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>

<button onclick="sub();">提交</button><br/>
<button onclick="fun1();">选择4,5复选框</button><br/>
<button onclick="fun2();">选择3单选框</button><br/>
<button onclick="fun3();">选择2单选框</button><br/>
<script type="text/javascript">
  function fun1(){
     //复选框设置值
     var oCheckbox = document.getElementsByName("checkbox1");
     var arr = [];
     var index = 0;
     for(var i=0;i<oCheckbox.length;i++)
     {
          if(oCheckbox[i].value == 4 || oCheckbox[i].value == 5)
          {    
             oCheckbox[i].checked = true;
          }else{
             oCheckbox[i].checked = false;
          }
     }
  }

  function fun2(){
     //单选框设置值
     var oRadio = document.getElementsByName("radio1");
     for(var i=0;i<oRadio.length;i++)
     {
          if(oRadio[i].value == 3)
          {    
             oRadio[i].checked = true;
             break;
          }
     }
  }

  function fun3(){
     //下拉框设置值
     var oSelect = document.getElementById("select1");
     oSelect.value = 2;
  }
 
  function sub(){
     //复选框获取值
     var oCheckbox = document.getElementsByName("checkbox1");
     var arr = [];
     var index = 0;
     for(var i=0;i<oCheckbox.length;i++)
     {
          if(oCheckbox[i].checked)
          {    
             arr[index++] = oCheckbox[i].value;
          }
     }
     alert("复选框:"+arr.toString());
   
     //单选框获取值
     var oRadio = document.getElementsByName("radio1");
     var rvalue = 0;    
     for(var i=0;i<oRadio.length;i++)
     {
          if(oRadio[i].checked)
          {    
             rvalue = oRadio[i].value;
             break;
          }
     }
     alert("单选框:"+rvalue);


     var oSelect = document.getElementById("select1");
     alert("下拉框:"+oSelect.value);
  }
</script>
</body>
</html>

2. JQuery 方式:

<!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>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>

<body>
复选框:
<input type="checkbox" name="checkbox1" value="1" checked/>1
<input type="checkbox" name="checkbox1" value="2"/>2
<input type="checkbox" name="checkbox1" value="3" checked/>3
<input type="checkbox" name="checkbox1" value="4"/>4
<input type="checkbox" name="checkbox1" value="5"/>5

<br/>

单选框:
<input type="radio" id="radio1" name="radio1" value="1" checked>1
<input type="radio" id="radio1" name="radio1" value="2">2
<input type="radio" id="radio1" name="radio1" value="3">3
<br/>
下拉框:
<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>

<button onclick="sub();">提交</button><br/>
<button onclick="fun1();">选择4,5复选框</button><br/>
<button onclick="fun2();">选择3单选框</button><br/>
<button onclick="fun3();">选择2单选框</button><br/>
<script type="text/javascript">
  $(document).ready(function(){
    
  });
  function fun1(){
     //复选框设置值
     var oCheckbox = $("input[name=checkbox1]");
     var arr = [];
     var index = 0;
     for(var i=0;i<oCheckbox.length;i++)
     {
          if(oCheckbox[i].value == 4 || oCheckbox[i].value == 5)
          {    
             oCheckbox[i].checked = true;
          }else{
             oCheckbox[i].checked = false;
          }
     }
  }

  function fun2(){
     //单选框设置值
     var oRadio = $("input[name=radio1]");
     for(var i=0;i<oRadio.length;i++)
     {
          if(oRadio[i].value == 3)
          {    
             oRadio[i].checked = true;
             break;
          }
     }
  }

  function fun3(){
     //下拉框设置值
     var oSelect = $("#select1");
     oSelect.val(2);
  }
 
  function sub(){
     //复选框获取值
     var oCheckbox = $("input[name=checkbox1]");
     var arr = [];
     var index = 0;
     for(var i=0;i<oCheckbox.length;i++)
     {
          if(oCheckbox[i].checked)
          {    
             arr[index++] = oCheckbox[i].value;
          }
     }
     alert("复选框:"+arr.toString());
   
     //单选框获取值
     var oRadio =$("input[name=radio1]");
     var rvalue = 0;    
     for(var i=0;i<oRadio.length;i++)
     {
          if(oRadio[i].checked)
          {    
             rvalue = oRadio[i].value;
             break;
          }
     }
     alert("单选框:"+rvalue);


     var oSelect = $("#select1");
     alert("下拉框:"+oSelect.val());
  }
</script>
</body>
</html>


0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 老人户口迁移到北京医保怎么办 过山洞经常堵耳朵怎么办 门有了一个洞该怎么办 公司要求补税没钱补怎么办 公司补税补不起了怎么办 脚被石头砸肿了怎么办 砸到脚背肿了怎么办 小猫吃完饭抓地怎么办 耳机链接处断了怎么办 表链从表盘断了怎么办 龟头和皮分开了怎么办 微信买票被骗了怎么办 撞车了我的全责怎么办 蒙田包包里面不耐脏怎么办? 摩托车转向灯不会打怎么办 浓硫酸弄到脸上怎么办 钥匙被锁在家里怎么办 有奶宝宝吸不出来怎么办 奶涨宝宝吸不出来怎么办 高铁票未取误点怎么办 飞猪上12306占座失败怎么办? 新生儿肚脐还没有脱落发炎怎么办 蹲坑被纸巾堵了怎么办 老公有外遇老婆不想离婚怎么办 结婚十年妻子出轨该怎么办 初生儿眼睛多眼屎怎么办 被丝袜脚摩擦过瘾了怎么办 老公在卧室装摄像头怎么办 听了鬼故事害怕怎么办 看完鬼片害怕睡不着怎么办 晚上看了鬼片怎么办 说话不经过大脑考虑怎么办 我太受欢迎了怎么办动漫结局 狗胃不好总呕吐怎么办 比格犬晚上叫怎么办 玻尿酸隆鼻变宽了怎么办 打玻尿酸鼻子变宽怎么办 鼻炎的人感冒了怎么办 小孩上幼儿园反复感冒怎么办 3岁宝宝感冒鼻炎怎么办 鼻炎犯了鼻子不通气怎么办