Question

大家好我无法获得这里的无线电输入值是我的代码：警报未运行我想做一个实时计算，显示要支付的总额，我无法处理无线电值我感谢你的帮助谢谢：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>

Answer 1

＆＃13;

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;
 			}
		}

}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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查询或querySelectorAll ...

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>

用javascript获取无线电值

2 个答案: