JSFiddle - React, Tailwind, and code Playground
HTML
<form id="menu">
<label>
<span class='title'>Menu 1:</span>
<input type="radio" name="menuitem" />
</label>
<label>
<span class='title'>Menu 2:</span>
<input type="radio" name="menuitem" />
</label>
<label>
<span class='title'>Menu 3:</span>
<input type="radio" name="menuitem" />
</label>
<label>
<span class='title'>Menu 4:</span>
<input type="radio" name="menuitem" />
</label>
<label>
<span class='title'>Menu 5:</span>
<input type="radio" name="menuitem" />
</label>
<label>
<span class='title'>Menu 6:</span>
<input type="radio" name="menuitem" />
</label>
<label>
<span class='title'>Menu 7:</span>
<input type="radio" name="menuitem" />
</label>
</form>
<div id="sub_total"></div>
CSS
#menu{
margin-left: 10px;
display: inline-block;
}
#menu label{
display:block;
margin-top: 5px;
border-bottom: 1px solid gray;
}
#menu label input, #menu .title{
vertical-align: middle;
}
#sub_total{
margin-top: 30px;
border-top: 2px dashed blue;
}
JavaScript
//Set the tax
var f_tax = 0.07,
i_menu_base = 5;
//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
e_radios = e_menu.getElementsByTagName("input"),
e_subtotal = document.getElementById("sub_total");
// Add event listeners for when any checkbox changes value
for(var i = 0; i < e_radios.length; i++){
e_radios[i].onchange = function(){
//Recalculate subtotal
get_subtotal(this);
}
}
//get_subtotal calculates the subtotal based on which checkboxes are checked
function get_subtotal(el){
var f_sub_total = 0.0,
f_grand_total = 0.0;
var subtotal, tax, grandtotal;
f_sub_total += get_index(el) * i_menu_base
//Calculate the grand total
f_grand_total = f_sub_total*(1+f_tax);
//Format them
subtotal = (Math.round(f_sub_total*100)/100).toFixed(2);
tax = (Math.round(f_tax*10000)/100).toFixed(2);
grandtotal = (Math.round(f_grand_total*100)/100).toFixed(2);
//Add them to the element
e_subtotal.innerHTML = "Subtotal: "+subtotal+"<br />";
e_subtotal.innerHTML += "Tax: "+tax+"%<br />";
e_subtotal.innerHTML += "Total: "+grandtotal;
}
function get_index(element){
for(var i = 1; i <= e_radios.length; i++){
if(e_radios[i-1] == element){
return i;
}
}
}