Question

所以我正在尝试建立一个基本的联邦税计算器，我已经将它们全部构建（单一/ 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>

这是我尝试使用它们，但我可以看到缺少的部分，我将它们连接到代码的实际部分。我如何连接它们？如果有人可以给我一个例子，我相信我可以找出其他人。以下代码是单个文件管理器的税，我如何连接＆＃34;单个＆＃34;代码按钮？

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

谢谢！

Answer 1

您可以像获取文本输入字段一样获得它：

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

#status包装器div
input输入标记
:checked已检查的电台

这将返回单个， MFJ ， HOH 。然后，您只需使用if或switch语句即可在选择一个语句时执行所需操作。

以下是单击时输出所选值的示例：

＆＃13;

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')
    }
  })
})

＆＃13;

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

＆＃13;

Answer 2

一种方法是使用更改事件，然后运行if语句以查看希望一个被检查，然后根据选中的单选按钮执行一个函数

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

如何连接单选按钮

3 个答案: