如何连接单选按钮
[英]How to connect radio buttons
问题描述
So I am trying to build a basic Federal Tax Calculator and I have built them all (Single/MFJ/HOH) separately but I am trying to combine them. 
因此，我试图构建一个基本的联邦税计算器，并且分别构建了它们（Single / MFJ / HOH），但是我试图将它们组合在一起。 I have built the radio buttons, here is the code for the buttons: 我已经构建了单选按钮，这是按钮的代码：
<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>
This is my attempt at using them, but I can see the piece that is missing, the actual part where I would connect them to the code. 这是我尝试使用它们的尝试，但是我可以看到缺少的部分，即将它们连接到代码的实际部分。 How do I connect them? 如何连接它们？ If someone could give me one example, I'm sure I could figure out the others. 如果有人可以给我一个例子，我敢肯定我可以找出其他例子。 The following code is the taxes for a single filer, how would I connect the "single" button to the code? 以下代码是单个文件管理器的税金，我该如何将“单个”按钮连接到代码？
<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>
Thank you! 谢谢！
3 个解决方案
解决方案1
0 2018-04-07 17:17:51
You would get it the same way you get a text input field: 您将以与获取文本输入字段相同的方式获得它：
let status = document.querySelector('#status input:checked').value
-
#statusthe wrapper div#status包装器div -
inputthe input taginput输入标签 -
:checkedthe checked radio:checked了检查的收音机
This will return either Single , MFJ , HOH . 这将返回Single ， MFJ ， HOH 。 You will then just need to use an if or switch statement to do what you want when one is selected. 然后，只需选择一个if或switch语句即可执行选择操作。
Here is an example that will output the selected value when clicked: 这是一个示例，单击后将输出所选值：
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>
解决方案2
0 2018-04-07 17:22:55
One way to do it is to use a change event and then run an if statement to see wish one is checked and then execute a function according to the radio button checked 一种方法是使用更改事件，然后运行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>
解决方案3
0 2018-04-07 17:25:07
var ch = document.getElementsByName('status');
for (var i = ch.length; i--;) {
ch[i].onchange = function() {
alert(this.value);
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.