How to connect radio buttons
Question
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. 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 answers
solution1
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 -
inputthe input tag -
:checkedthe checked radio
This will return either Single , MFJ , HOH . You will then just need to use an if or switch statement to do what you want when one is selected.
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>
solution2
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
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>
solution3
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);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.