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>

-

专注iOS、Android、Java、Golang开发等涉及开发管理相关。技术博客：http://xiaopin.cnblogs.com

查看全文

相关阅读:
超经典~超全的jQuery插件大全
 如何用PHP做到页面注册审核
 php实现签到功能
 php中的实用分页类
 微信小程序，超能装的实例教程
 php之常用的流程管理
 php之人员的权限管理（RBAC）
php之简单的文件管理（基本功能）
php最新学习-----文件的操作
 关于LAMP的配置之（虚拟机的安装、创建、配置）

原文地址：https://www.cnblogs.com/xiaopin/p/2175190.html