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>

时间： 2024-12-22 15:37:11

javascript获取select,checkbox,radio的值的相关文章

javascript 获取表单中radio选中值

radio是form表单中非常常用的一种表单元素,对于radio的操作中,都是利用radio的checked属性,都是对radio的checked属性做操作.获取radio的选中值时,遍历radio按钮项,找到被选中(checked)的状态的那个按钮,然后返回其值:给radio赋值时,找到对应的按钮项,将其checked属性置为true即可. 获取radio值 Method1 遍历radio集合 假如我们给定页面 <body> <p> <label for="Doo

javascript获取select 的id与值

<script type="text/javascript"> function showOptionId () { var type = document.getElementById ("select"); //获取select var typeId = type.options [type.selectedIndex].id; //获取option的ID var typeValue = type.options [type.selectedInde

JavaScript获取Select下拉框Option的Value和Text值的方法

Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个form表单中的Select下拉框菜单为例,来说明如何用JavaScript获取其 Value值和Text值: 示例表单,里面是一个select下拉列表框的各个列表项及值: <form name="form1"> <select name="testvalue&

Javascript获取select下拉框选中的的值

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name="">     <option   value="1">text1</option>     <option   value="2">text2</option>    </select> co

JavaScript获取select下拉框中的第一个值

JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源代码 <!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/xhtm

JQuery操作select checkbox radio总结

JQuery是一个很强大的工具所以我要找到它最便捷的方法,嘻嘻 Select 增删改查: Select查: 1.val值: $("#selectid").val();       //最方便的 2.text值: $("#selectid option:selected").text();       //最方便的 或 $("#selectid").find("option:selected").text() 3.Index值:

jquery 操作select,checkbox,radio （整理）

在工作中经常用到select,checkbox,radio,今天有点空闲就整理一下,免得以后用的时候还要重新找. 操作select下拉框 -- 获取值或选中项: 1, $("#select_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发 2,var checkValue=$("#select_id").val(); //获取Select选择的Value 3,var checkText=$(&

JavaScript获取复选框的值

使用JavaScript获取复选框的值 <!DOCTYPE html> <html> <head> <meta charset="GBK"> <title>获取复选框的值</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script>

js获取select标签选中的值及文本

原生js方式: var obj = document.getElementByIdx_x("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jquery方式: 第一种方式$('#testSelect option:selected').te