javascript获取select,checkbox,radio的值

zoukankan html css js c++ java

javascript获取select,checkbox,radio的值

转发来自博客园博主：肖品博主的链接

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>

本人小白，博客作为在线笔记，若有错误，还望指出，转载链接截图等皆为学习，若有侵权，请告知，

查看全文

相关阅读:
android ndk 调试问题
 音频
 文件分割与c语言文件结
 本机抓包
 rtm匹转
 mac 工具等效率
 【MySQL】Explain Tutorial
Sed基本入门[5] Sed Hold and Pattern Space Commands
Sed基本入门[3] Regular Expressions
Protocol Buffer Basics

原文地址：https://www.cnblogs.com/xiaoxiaoyao/p/7803436.html

javascript获取select,checkbox,radio的值

转发来自 博客园博主：肖品 博主的链接

转发来自博客园博主：肖品博主的链接