使用 javascript 获取无线电值答案

【问题标题】：get radio value with javascript使用 javascript 获取无线电值
【发布时间】：2017-11-07 21:14:27
【问题描述】：

大家好，我无法获取无线电输入值，这是我的代码：警报未运行我想做一个实时计算来显示要支付的总额，但我无法处理无线电值感谢您的帮助，谢谢：D

function transfer()
{
		var vip=document.getElementByName('mercedes');
		for (var i = 0, length = vip.length; i < length; i++)
		{
 			if (vip[i].checked)
 			{
  			
  			alert(vip[i].value);

  			
  				break;
 			}
		}

}

<div class="form-group">
<label  for="f1-about-yourself">Mercedes VIP transfer*:</label> <br>
<input  type="radio" name="mercedes" id="yes" value="yes"
onclick="transfer()">
<label  for="yes">Yes:</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<input  type="radio" name="mercedes" id="no" value="no" checked="" onclick="transfer()">
<label  for="no">No:</label>
</div>

【问题讨论】：

getElementByName 不是一个有效的函数，也许你的意思是：getElementsByName（复数元素）
非常感谢 musefan
调试问题时请留意浏览器控制台（大多数浏览器中的 F12），那里的错误会为您指出问题

标签： javascript radio

【解决方案1】：

function transfer()
{
		var vip=document.getElementsByName('mercedes');
		for (var i = 0, length = vip.length; i < length; i++)
		{
 			if (vip[i].checked)
 			{
  			
  			alert(vip[i].value);

  			
  				break;
 			}
		}

}

<div class="form-group">
<label  for="f1-about-yourself">Mercedes VIP transfer*:</label> <br>
<input  type="radio" name="mercedes" id="yes" value="yes"
onclick="transfer()">
<label  for="yes">Yes:</label>
&nbsp;&nbsp;&nbsp;&nbsp;
<input  type="radio" name="mercedes" id="no" value="no"  onclick="transfer()">
<label  for="no">No:</label>
</div>

【讨论】：

【解决方案2】：

除了已经给出的确实解决了 OP 问题的答案之外，OP 可能会考虑标记和代码的分离，因此不在 html 元素标记中使用内联代码。

强烈建议使用 html form 元素，然后托管特定的表单控件，如 input、button 等。制造 “DOM Level 0” 表单集合的使用也没有过时。例如，如果将其他控件动态添加到表单中，则下一个示例提供的事件委托会有所帮助 - 不需要关注将事件处理程序注册到每个新附加的表单控件。最后，注册到 'change' 事件将捕获无线电集合的每一个变化......

function isMercedesTransferType(elmNode) {
  return ((elmNode.type === 'radio') && (elmNode.name === 'mercedes'));
}
function handleVipTransferChange(evt) {
  var elmNode = evt.target;
  if (isMercedesTransferType(elmNode) && elmNode.checked) {
    console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value);
  }
}

function initializeVipTransfer() {
  document.forms['mercedes-vip-transfer'].addEventListener('change', handleVipTransferChange, false);
}

initializeVipTransfer();

.as-console-wrapper { max-height: 100%!important; top: 70px; }

<form class="form-group" name="mercedes-vip-transfer">
  <legend>Mercedes VIP transfer*:</legend>
  <label>
    <input  type="radio" name="mercedes" value="yes">
    <span>Yes</span>
  </label>
  <label>
    <input  type="radio" name="mercedes" value="no">
    <span>No</span>
  </label>
</form>

这里将演示另一种直接初始化所需表单控件的方法...

function isMercedesTransferType(elmNode) {
  return ((elmNode.type === 'radio') && (elmNode.name === 'mercedes'));
}
function handleVipTransferChange(evt) {
  var elmNode = evt.target;
  if (elmNode.checked) {
    console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value);
  }
}

function initializeVipTransfer() {
  var list = document.forms['mercedes-vip-transfer'].elements['mercedes'];
  Array.from(list).filter(isMercedesTransferType).forEach(function (elmNode) {
    elmNode.addEventListener('change', handleVipTransferChange, false);
  });
}

initializeVipTransfer();

.as-console-wrapper { max-height: 100%!important; top: 70px; }

<form class="form-group" name="mercedes-vip-transfer">
  <legend>Mercedes VIP transfer*:</legend>
  <label>
    <input  type="radio" name="mercedes" value="yes">
    <span>Yes</span>
  </label>
  <label>
    <input  type="radio" name="mercedes" value="no">
    <span>No</span>
  </label>
</form>

...为了将其四舍五入，如果有一个 “最新” DOM，可以考虑通过 querySelector 和/或 @ 使用现代 DOM 查询987654322@ ...

function handleVipTransferChange(evt) {
  var elmNode = evt.target;
  if (elmNode.checked) {
    console.log('handleVipTransferChange [name, value] : ', elmNode.name, elmNode.value);
  }
}

function initializeVipTransfer() {
  var list = document.querySelectorAll('#mercedes-vip-transfer [type="radio"][name="mercedes"]');
  Array.from(list).forEach(function (elmNode) {
    elmNode.addEventListener('change', handleVipTransferChange, false);
  });
}

initializeVipTransfer();

.as-console-wrapper { max-height: 100%!important; top: 70px; }

<form class="form-group" id="mercedes-vip-transfer">
  <legend>Mercedes VIP transfer*:</legend>
  <label>
    <input  type="radio" name="mercedes" value="yes">
    <span>Yes</span>
  </label>
  <label>
    <input  type="radio" name="mercedes" value="no">
    <span>No</span>
  </label>
</form>

【讨论】：