javascript获取select,checkbox,radio的值

Posted 2020-10-13 xiaoxiaoyao61

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于javascript获取select,checkbox,radio的值的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript怎样获取select标签当前选择的值呢？

js 联动实现日期选择，一般用作生日

使用javascript获取选定的文本select2

在javascript中获取select中的选项值[重复]

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

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