如果检查输入，我如何检索值[重复]

Posted 2023-03-05

【中文标题】如果检查输入，我如何检索值[重复]

【英文标题】：How do i retrieve the value if input got checked [duplicate]

【发布时间】：2016-01-04 11:06:04

【问题描述】：

如果输入被检查，我想检索值。

<input type="radio" name="radioGroup" value="check" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<button>Submit</button>

在我尝试的脚本中，

var a = document.getElementsByTagName("input").name;
var btn = document.getElementsByTagName("button");
btn.onclick = function () 
    if (a.checked == true) 
        console.log(a.value);
    
;

我需要在每个输入中添加一个“id”吗？ 我想要纯 javascript，因为我已经知道 jQuery 代码。

【问题讨论】：

嗯，jQuery 的选择器函数与 Javascript 的不同，因为document.getElementsByTagName 给你一个NodeList，而不是一个元素。此时不需要var a = … 和var btn = …，它们也不正确。对于按钮，像document.querySelector('button') 这样的选择器更合适，如果该按钮是页面上唯一的按钮。然后阅读重复的目标以找出其余部分。

【参考方案1】：

您可以使用 querySelector() 来获取选中的元素。另外 getElementsByTagName() 返回 htmlCollection 所以您需要使用索引选择第一个，否则您需要提供 id 然后使用 getElementById()强>。

var btn = document.getElementsByTagName("button")[0];
// getting first button from HTMLCollection
btn.onclick = function() 
// binding click event handler
  var a = document.querySelector('[name="radioGroup"]:checked');
  // getting checked checkbox
  if (a) 
  // checking a is defined or not , if not it means no checked buttons are there
    console.log(a.value);
    // logging it's value in console
  
;

<input type="radio" name="radioGroup" value="check" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<button>Submit</button>

【参考方案2】：

getElementsByTagName() 方法返回文档中具有指定标签名称的所有元素的集合，作为 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始。

var a = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button");
btn[0].onclick = function () 
   for(var i=0;i<a.length;i++)
       if (a[i].checked == true) 
          console.log(a[i].value);
       
   
;

【参考方案3】：

点击按钮您可以使用 querySelector 来获取您的结果。 以下代码会有所帮助。

function GetSelected()

   alert(document.querySelector('input[name="radioGroup"]:checked').value);



<input type="radio" name="radioGroup" value="check" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<input type="radio" name="radioGroup" value="wrong" />
<button onclick="GetSelected()">Submit</button>