JSFiddle - React, Tailwind, and code Playground

by billyonecan

HTML

<input type="checkbox" class="cbox" id ="one"/>One
<input type="checkbox" class="cbox" id="two"/>Two
<input type="checkbox" class="cbox" id="three"/>Three
<span id="increment-me">10</span>

JavaScript

$('.cbox').on('change', function() {
    
    /* set the value to add or subtract
     * 5 if #one was checked/unchecked, else 7
     */
    var valueToAdd  = $(this).is('#one') ? 5 : 7,
        isChecked = this.checked;
    
    /* increment/decrement the text of #increment-me
     * based on whether the checkbox was checked or unchecked
     */
    $('#increment-me').text(function(_, text) {
        if (isChecked) {
            return parseInt(text, 10) + valueToAdd;   
        } else {
            return parseInt(text, 10) - valueToAdd;
        }
    });
    
});