JSFiddle - React, Tailwind, and code Playground

by seymorevenue

HTML

<form id="form_id" onsubmit="return false;">
		<table>
			<thead>
				<th>Services</th>
			</thead>
			<tbody>
				<tr>
					<td>Virus Removal</td>
					<td><input type="checkbox" name="compitem"  value="20" onclick="addition(this)"/>$20<br></td>
				</tr>
				<tr>
					<td>System Clean Up</td>
					<td><input type="checkbox"  name="compitem" value="20" onclick="addition(this)"/>$20<br></td>
				</tr>
				<tr>
					<td>Driver Updates</td>
					<td><input type="checkbox" name="compitem"  value="20" onclick="addition(this)"/>$20<br></td>
				</tr>
				<tr>
					<td>Fix Registry Errors</td>
					<td><input type="checkbox"  name="compitem" value="20" onclick="addition(this)"/>$20<br></td>
				</tr>
				<tr>
					<td>Hardware Updates</td>
					<td><input type="checkbox"  name="compitem" value="20" onclick="addition(this)"/>$20<br></td>
				</tr>
				<tr>
					<td>Cable Management</td>
					<td><input type="checkbox"  name="compitem" value="20" onclick="addition(this)"/>$20<br></td>
				</tr>
				<tr>
					<td> <button onclick="addition();">total?</button></td>
				</tr>
			</tbody>
	</form>
	<span id="totalSpan">0</span>

JavaScript

var sum = 0;
 
function addition(param)
    {
    if (param.checked == true)
        sum += parseInt(param.value);
    else
        sum += -parseInt(param.value);
 
    docoument.getElementById("totalSpan").innerText = sum;
    }