JSFiddle - React, Tailwind, and code Playground

HTML

<section class="bitInput" id="Mode1">
<label>8<input value="8" type="checkbox"/></label>
<label>4<input value="4" type="checkbox"/></label>
<label>2<input value="2" type="checkbox"/></label>
<label>1<input value="1" type="checkbox"/></label>
<input type="text" id="SlaveMode1" name='"CIPCONF".CR69_SlaveMode[1]' />
</section>

CSS

.bitInput { display: flex; align-items: flex-end; }
.bitInput label { text-align:center; border:1px solid black; border-left: none;}
.bitInput label:nth-of-type(1) { border-left:1px solid black; }
.bitInput input[type="checkbox"] { display:block; }
.bitInput input[type="text"] { margin-left: 1em; width: 4em}

JavaScript

var wert = 11;
preSelect(document.getElementById("Mode1"), wert);
document.getElementById("Mode1").addEventListener("click", collectCheckedValues);


function collectCheckedValues(evt) {
   var cb = evt.currentTarget.querySelectorAll("input[type=checkbox]");
   var wert = 0;
   for (var i=0; i<cb.length; i++)
      if (cb[i].checked) wert += parseInt(cb[i].value);
   evt.currentTarget.querySelector("input[type=text]").value = wert;
}

function preSelect(container, wert) {
  container.querySelector("input[type=text]").value = wert;
  var cb = container.querySelectorAll("input[type=checkbox]");
  for (var i=0; i<cb.length; i++) {
    var cbVal = parseInt(cb[i].value);
    if (wert >= cbVal) {
      cb[i].checked = true;
      wert -= cbVal;
    }
  }
}