JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="one">1</label>
    <input type="radio" name="1" id="1" value="228" />
</div>
<div>
    <label for="two">2</label>
    <input type="checkbox" name="2" id="2" value="228" />
</div>
<div>
    <label for="three">3</label>
    <input type="checkbox" name="3" id="3" value="228" />
</div>
<div>
    <label for="four">4</label>
    <input type="checkbox" name="4" id="4" value="228" />
</div>
<div>
    <label for="five">5</label>
    <input type="checkbox" name="5" id="5" value="228" />
</div>

<select>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<input type="text" name="Total" value="Total">

JavaScript

$(function() {
    var total = $("input[name='Total']");
    var checkBox = $("input[type='checkbox']");
    var _select = $("select");
    checkBox.click(function(){
        checkBox.prop("checked", false);
        var _index = $(this).attr("id")
        total.val(_index * 228);
        _select.val(_index);
        checkBox.each(function(){
            if (_index > 0) {
                $(this).prop("checked", true);
                _index--;
            }
        });
    });
    _select.change(function() {
        checkBox.prop("checked", false);
        var _val = $(this).val();
        total.val(_val * 228);
        checkBox.each(function() {
            if (_val > 0) {
                $(this).prop("checked", true);
                _val--;
            }
        });       
    });  
});