JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<form action="">
    <ul>
        <li><label><input type="checkbox" value="1"> One</label></li>
        <li><label><input type="checkbox" value="2"> Two</label></li>
        <li><label><input type="checkbox" value="3"> Three</label></li>
        <li><label><input type="checkbox" value="4"> Four</label></li>
        <li><label><input type="checkbox" value="5"> Five</label></li>
    </ul>
</form>
<p>Your total cost is <span>0</span> $.</p>

CSS

* {font-family: Segoe UI;}
ul, ul li {display: block; list-style: none; margin: 0; padding: 0;}

JavaScript

$(document).ready(function(){
    $("input").click(function(){
        val = 0;
        $("input:checked").each(function(){
            val += parseInt($(this).val());
        });
        $("span").text(val);
    });
});