如何连接单选按钮
[英]How to connect radio buttons
问题描述
因此，我试图构建一个基本的联邦税计算器，并且分别构建了它们（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>
谢谢！
3 个解决方案
解决方案1
0 2018-04-07 17:17:51
您将以与获取文本输入字段相同的方式获得它：
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>
解决方案2
0 2018-04-07 17:22:55
一种方法是使用更改事件，然后运行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.