JSFiddle - React, Tailwind, and code Playground
HTML
<form id="SSVIN" method="post">
<fieldset>
<legend>Engine Options
</legend><input type="checkbox" checked="checked" required="" name="ezh"><label for="ezh">5.7L V8 HEMI 395 HP 410 lb-ft Torque - Standard
</label>
</fieldset>
<fieldset>
<legend>Functional Packages</legend>
<div id="functionalpackages">
<label><input type="checkbox" name="aed" value="632.00" onclick="updatetotal()">Chrome Appearance Group (Bumpers, Grille, & Aluminum Wheels) - <strong>$632.00</strong></label><br>
<label><input type="checkbox" name="adb" value="359.00" onclick="updatetotal()">Protection Group (Tow Hooks, Transfer Case & Front Suspension Skid Plates) - <strong>$359.00</strong></label><br>
<label><input type="checkbox" name="ajb" value="359.00" onclick="updatetotal()">Remote Start & Security Alarm - <strong>$359.00</strong></label></div>
</fieldset>
<fieldset>
<legend>Interior Options</legend>
<div id="interioroptions">
<input type="checkbox" id="d7x8" name="d7x8" value="41.00" onclick="updatetotal()"><label for="d7x8">40/20/40 Front Center Bench Seat - <strong>$41.00</strong></label><br>
<input type="checkbox" id="cke" name="cke" value="100.00" onclick="updatetotal()"><label for="cke">Carpet Floor Covering - <strong>$100.00</strong></label><br>
<input type="checkbox" id="xap" name="xap" value="114.00" onclick="updatetotal()"><label for="xap">Power Adjustable Pedals - <strong>$114.00</strong></label><br>
<input type="checkbox" id="xhc" name="xhc" value="268.00" onclick="updatetotal()"><label for="xhc">Trailer Brake Control - <strong>$268.00</strong></label><br>
<input type="checkbox" id="ra2" name="ra2" value="632.00" onclick="updatetotal()"><label for="ra2">Uconnect 3 with 5" Display & Bluetooth - <strong>$632.00</strong></label></div>
</fieldset>
<fieldset>
<legend>Exterior Options</legend>
<div id="exterioroptions">
<input type="checkbox" id="nfx" name="nfx"...
CSS
fieldset {
border: solid 3px #000000;
margin-bottom: 10px;
}
legend {
background-color: #d3d3d3;
border: 1.5px solid #000000;
font-weight: bold;
font-size: larger;
color: #000000;
margin: 18px;
padding-left: 4px;
padding-right: 4px;
}
JavaScript
function gettotalprice() {
var fp = document.getElementById('functionalpackages');
var fps = fp.getElementsByTagName('input');
var io = document.getElementById('interioroptions');
var ios = io.getElementsByTagName('input');
var eo = document.getElementById('exterioroptions');
var eos = eo.getElementsByTagName('input');
var dos = document.getElementById('deleteoptions');
var doss = dos.getElementsByTagName('input');
var sc = document.getElementById('servicecontracts');
var scs = sc.getElementsByTagName('input');
var uo = document.getElementById('upfitoptions');
var uos = uo.getElementsByTagName('input');
var gp = document.getElementById('graphics');
var gps = gp.getElementsByTagName('input');
for (var i = 0, len = fps.length; i < len; i++) {
if (fps[i].type === 'checkbox') {
fps[i].onclick = updateTotal;
}
}
for (var i = 0, len = ios.length; i < len; i++) {
if (ios[i].type === 'checkbox') {
ios[i].onclick = updateTotal;
}
}
for (var i = 0, len = eos.length; i < len; i++) {
if (eos[i].type === 'checkbox') {
eos[i].onclick = updateTotal;
}
}
for (var i = 0, len = doss.length; i < len; i++) {
if (doss[i].type === 'checkbox') {
doss[i].onclick = updateTotal;
}
}
for (var i = 0, len = scs.length; i < len; i++) {
if (scs[i].type === 'checkbox') {
scs[i].onclick = updateTotal;
}
}
for (var i = 0, len = uos.length; i < len; i++) {
if (uos[i].type === 'checkbox') {
uos[i].onclick = updateTotal;
}
}
for (var i = 0, len = gps.length; i < len; i++) {
if (gps[i].type === 'checkbox') {
gps[i].onclick = updateTotal;
}
}
}
function updateTotal(e) {
var form = this.form;
var val = parseFloat(form.elements['total'].value);
if (this.checked) {
val += parseFloat(this.value);
} else {
val -= parseFloat(this.value);
}
form.elements['total'].value = formatDecimal(val);
}
function formatDecimal(val, n)...