JSFiddle - React, Tailwind, and code Playground

by Paul

HTML

<form>
    <li id="li_11" class="checkboxes guidelines_bottom preference">
        <label class="description">Are you claiming any of the following preferences?</label>
        <div>	<span><input id="element_11_1" name="element_11_1" class="element checkbox" type="checkbox" value="1">
                <label class="choice" for="element_11_1">Osage</label>
            </span>
 <span><input id="element_11_2" name="element_11_2" class="element checkbox" type="checkbox" value="1">
                <label class="choice" for="element_11_2">Osage's Spouse/Parent</label>
            </span>
 <span><input id="element_11_3" name="element_11_3" class="element checkbox" type="checkbox" value="1">
                <label class="choice" for="element_11_3">Native American</label>
            </span>
 <span><input id="element_11_4" name="element_11_4" class="element checkbox" type="checkbox" value="1">
                <label class="choice" for="element_11_4">Veteran</label>
            </span>
 <span><input id="element_11_5" name="element_11_5" class="element checkbox" type="checkbox" value="1">
                <label class="choice" for="element_11_5">Disabled Veteran</label>
            </span>

        </div>
    </li>
    <li id="li_78" class="checkboxes guidelines_bottom two_columns preference">
        <label class="description">Type of education completed? (<strong>Check all that you have graduated from</strong>) <span id="required_78" class="required">*</span>

        </label>
        <div> <span><input id="element_78_1" name="element_78_1" class="element checkbox" type="checkbox" value="1">
                    <label class="choice" for="element_78_1">High School / GED</label>
                </span>
 <span><input id="element_78_2" name="element_78_2" class="element checkbox" type="checkbox" value="1">
                    <label class="choice" for="element_78_2">Trade, Business or Technical</label>
                </span>
 <span><input id="element_78_3" name="element_78_3"...

CSS

body {
    padding:10px;
    margin:25px 0 0 25px;
    font:normal 12px/24px Arial, sans-serif;
}
input {
    padding:5px;
    margin: 5px 0;
    vertical-align:middle;
    display:inline-block;
}
label {
    vertical-align:middle;
    display:inline-block;
    margin-right: 15px;
}
li {
    margin-bottom: 20px;
}
#143 {
    background: #DDD;
    border:3px;
}

JavaScript

$(document).ready(function () {
    $('.preference :input[type="checkbox"]').change(function () {
        var total = 0;
        // Osage
        if ( $('#element_11_1:input[type="checkbox"]').is(':checked') ) {
              total = total + 3.0;   
        }
        // Osage Spouse/Parent
        if ( $('#element_11_2:input[type="checkbox"]').is(':checked') ) {
              total = total + 2.0;   
        }
        // Native American (Other)
        if ( $('#element_11_3:input[type="checkbox"]').is(':checked') ) {
              total = total + 1.0;   
        }
        // Veteran modifier
        if ( $('#element_11_4:input[type="checkbox"]').is(':checked') ) {
              total = total + 0.5;   
        }
        // Disabled Veteran modifier
        if ( $('#element_11_5:input[type="checkbox"]').is(':checked') ) {
              total = total + 0.5;   
        }
        
        // 2-year higher education modifier (associates/trade)
        if ( $('#element_78_2:input[type="checkbox"]').is(':checked') ) {
              total = total + 1.0;   
        }
        // 4-year higher education modifier (bachelors)
        if ( $('#element_78_3:input[type="checkbox"]').is(':checked') ) {
              total = total + 2.0;   
        }
        // 6-year higher education modifier (masters / professional)
        if ( $('#element_78_4:input[type="checkbox"]').is(':checked') ) {
              total = total + 3.0;   
        }
        // 8-year higher education modifier (doctorate)
        if ( $('#element_78_5:input[type="checkbox"]').is(':checked') ) {
              total = total + 4.0;   
        }
        
        // print total value
        $("#143").val(total);
    });
});