JSFiddle - React, Tailwind, and code Playground

by Aleksandr

HTML

<div style="border: 1px solid black; padding: 10px; margin: 10px;">
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />

<input id="b1" onclick="myFunc ()" type="hidden" name="" value="" />
<span hidden id="s1">100</span>
</div>

<div style="border: 1px solid black; padding: 10px; margin: 10px;">
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />

<input id="b2" onclick="myFunc ()" type="hidden" name="" value="" />
<span hidden id="s2">100</span>
</div>

<div style="border: 1px solid black; padding: 10px; margin: 10px;">
<input id="b3" onclick="myFunc ()" type="checkbox" name="" value="" />
<span hidden id="s3">100</span>
<input id="b4" onclick="myFunc ()" type="checkbox" name="" value="" />
<span hidden id="s4">100</span>
</div>

<div class="formInputBlock">
<br />
<b>Итоговая сумма:</b> <span id="r" name="sum">0</span> руб.
</div>

JavaScript

function myFunc ()
{
var rez = 0; with (document)
{
if (getElementById ('b1').checked) rez += parseFloat (getElementById ('s1').innerHTML);
if (getElementById ('b2').checked) rez += parseFloat (getElementById ('s2').innerHTML);
if (getElementById ('b3').checked) rez += parseFloat (getElementById ('s3').innerHTML);
if (getElementById ('b4').checked) rez += parseFloat (getElementById ('s4').innerHTML);
getElementById ('r').innerHTML = rez;
}
}