如何连接单选按钮答案

【问题标题】：How to connect radio buttons如何连接单选按钮
【发布时间】：2018-04-07 17:13:34
【问题描述】：

所以我正在尝试构建一个基本的联邦税收计算器，并且我已经分别构建了它们（Single/MFJ/HOH），但我正在尝试将它们组合起来。我已经构建了单选按钮，这里是按钮的代码：

<div id="status">
<input type="radio" id="Single" name="status" value="Single" checked="checked"> Single
<input type="radio" id="MFJ" name="status" value="MFJ"> Married Filing Jointly
<input type="radio" id="HOH" name="status" value="HOH"> Head of Household
</div>

这是我使用它们的尝试，但我可以看到缺少的部分，即我将它们连接到代码的实际部分。我如何连接它们？如果有人能给我一个例子，我相信我可以找出其他的。以下代码是单个报税人的税金，如何将“单个”按钮连接到代码？

<body>
    <div id="GrossIncome">
  <form name="GrossIncomeForm">
     <input type="text" name="answer box" />
    <button>Calculate</button>
   </form>
  <h4>Taxes Paid: $<span id="TaxesPaid">0.00</span></h4>
</div>

<script type="text/javascript">

document.querySelector('#GrossIncome form button').onclick = function(e) {
    e.preventDefault();

    var IncomeInput, TaxableIncome, TaxableIncomeAdjusted, TaxesPaid;
  IncomeInput = document.querySelector('#GrossIncome input').value;
  TaxableIncome = (IncomeInput.length) ? parseInt(IncomeInput, 10) : 0;
   TaxableIncomeAdjusted = TaxableIncome - 12000;

  if ( TaxableIncomeAdjusted > 500000 )
TaxesPaid = (TaxableIncomeAdjusted - 500000) * 0.37 + 150689.5;
  if ( TaxableIncomeAdjusted <= 500000 )
TaxesPaid = (TaxableIncomeAdjusted - 200000) * 0.35 + 45689.5;
  if ( TaxableIncomeAdjusted <= 200000 )
TaxesPaid = (TaxableIncomeAdjusted - 157500) * 0.32 + 32089.5;
   if ( TaxableIncomeAdjusted <= 157500 )
TaxesPaid = (TaxableIncomeAdjusted - 82500) * 0.24 + 14089.5;
   if ( TaxableIncomeAdjusted <= 82500 )
TaxesPaid = (TaxableIncomeAdjusted - 38700) * 0.22 + 4453.5;
  if ( TaxableIncomeAdjusted <= 38700 )
TaxesPaid = (TaxableIncomeAdjusted - 9525) * 0.12 + 952.5;
  if ( TaxableIncomeAdjusted <= 9525 )
TaxesPaid = TaxableIncomeAdjusted * 0.1;


  TaxesPaid = Math.max(TaxesPaid, 0).toFixed(2);

   document.querySelector('#TaxesPaid').innerHTML = TaxesPaid;
};

</script>

谢谢！

【问题讨论】：

标签： javascript html radio-button call

【解决方案1】：

一种方法是使用更改事件，然后运行 if 语句以查看是否已选中，然后根据选中的单选按钮执行功能

document.getElementById("status").addEventListener('change',function(){
   if(document.getElementById("Single").checked){
     console.log('single checked')
     // Do something if this one is checked
   }
 if(document.getElementById("MFJ").checked){
     console.log('Married Filing Jointly checked')
      // Do something if this one is checked
   }
   if(document.getElementById("HOH").checked){
     console.log('Head of Household checked')
      // Do something if this one is checked
   }
 })

<div id="status">
<form id="status">
<input type="radio" id="Single" name="status" value="Single" checked="checked"> Single
<input type="radio" id="MFJ" name="status" value="MFJ"> Married Filing Jointly
<input type="radio" id="HOH" name="status" value="HOH"> Head of Household
<form>
</div>

【讨论】：

对不起，这是我的第一篇文章，我希望我是在回复，而不仅仅是添加另一条评论——但是你有“如果这个被选中，做某事”的地方就是我放我的 JS 的地方代码？
@ vcschick在if语句内执行它，例如，当检查单个时在if语句中做某事..执行函数或做一些计算ect .. span>

【解决方案2】：

你会像得到一个文本输入字段一样得到它：

let status = document.querySelector('#status input:checked').value

#status包装div
input输入标签
:checked已选中的收音机

这将返回 Single、MFJ、HOH。然后，您只需要使用if 或switch 语句来执行您想要的操作。

这是一个在点击时输出所选值的示例：

Array.from(document.querySelectorAll('#status input')).forEach(input => {
  input.addEventListener('click', e => {
    let status = document.querySelector('#status input:checked').value
    if (status == 'Single') {
      console.log('I am Single')
    } else if (status == 'MFJ') {
      console.log('I am Married Filing Jointly')
    } else if (status == 'HOH') {
      console.log('I am Head of Household')
    }
  })
})

<div id="status">
  <input type="radio" id="Single" name="status" value="Single" checked="checked"> Single
  <input type="radio" id="MFJ" name="status" value="MFJ"> Married Filing Jointly
  <input type="radio" id="HOH" name="status" value="HOH"> Head of Household
</div>

【讨论】：

【解决方案3】：

var ch = document.getElementsByName('status');

for (var i = ch.length; i--;) {
    ch[i].onchange = function() {
        alert(this.value);
    }
}

【讨论】：

请注释您的代码。貌似也会报错，建议前先测试一下