JavaScript中获取radio的值

Posted 2023-04-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中获取radio的值相关的知识，希望对你有一定的参考价值。

单选按钮的代码如下：
<body>
<input name="q" type="radio" value="a" checked />
<input name="q" type="radio" value="b" />
<input name="q" type="radio" value="c" />
</body>
要求很简单，就是取出value的值。用于switch语句。
能用document.write();显示出也行，不要网上的if语句。
由于要实现功能特殊，请不要在input 后添加事件，可以再外层的form中添加。

1、radio为单选按钮，一般单选按钮有多个可供选择的项，而只能选择一个，比如男、女
2、那么给radio标签里面设定一个id或者class属性
3、在js里面，可以通过checked这个属性来判断哪一个radio标签被选择，
4、这样就可以获取到radio标签的值，然后根据标签的值进行判断，保存/插入数据库等操作参考技术A <html>
<HEAD>
<TITLE> 可用鼠标拖动的层 </TITLE>
</HEAD>

<BODY>
<input name="q" type="radio" value="a" checked />
<input name="q" type="radio" value="b" />
<input name="q" type="radio" value="c" />
<script>
var $ = function(x)return document.getElementById(x)
var set = function()
var obj = document.getElementsByTagName('input');
for(var i=0;i<obj.length;i++)
obj[i].onclick = function()
alert(this.value)

set();
</script>

</BODY><HTML> 参考技术B <body>
<form name="abc">
<input name="q" type="radio" value="a" checked />
<input name="q" type="radio" value="b" />
<input name="q" type="radio" value="c" />
</body>

document.write(abc.q);本回答被提问者采纳参考技术C function getRadioValue(radioName)

var radios = document.getElementsByName(radioName);
if(!radios)
return '';
for (var i = 0; i < radios.length; i++)

if (radios[i].checked)
return radios[i].value;

return '';
参考技术D <html>
<head>
<script type="text/javascript" language="javascript">
function Foo()
var selectedIndex = -1;
var form1 = document.getElementById("form1");
var i = 0;
for (i=0; i<form1.q.length; i++)
if (form1.q[i].checked)
selectedIndex = i;
alert("您选择项的 value 是：" + form1.q[i].value);
break;

if (selectedIndex < 0) alert("您没有选择任何项"); </script>
</head>
<body>
<form id="form1" action="" method="">
<input type="radio" name="q" value="a" checked>
<input type="radio" name="q" value="b">
<input type="radio" name="q" value="c"> <br/>
<input type="button" value="检查选择项" onclick="Foo()">
</form>
</body>
</html>

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中获取radio的值的主要内容，如果未能解决你的问题，请参考以下文章

js中，请问如何获取radio值

javascript获取select,checkbox,radio的值

JSP中读取的radio值为啥是on？

如何用JavaScript取得Radio被选中的值

Javascript 获取被选中的单选按钮的值

JavaScript中自定义函数以及文本框radio下拉框的值的获取，结合淘宝竞拍案例来理解。。。