使用复选框控制输入.value(有一个令人讨厌的转折)

我研究了几天用复选框控制UI的方法，在Stack'上一些成员的帮助下，我真的走了很远。但我的秃顶还没有完全停止。我一直在尝试进一步调整我的代码片段，通过在我的UI控制器旁边包含一个数值。(此值将在稍后的web-java applet中使用。)

例如，选中复选框后，将var total从0修改为30。如果复选框未选中，则返回值为"0"。

(Main Build JS Fiddle)，(复选框)。

允许使用数据属性，但是这些需要通过JS注入到HTML中。像以前一样，我有'NO'访问CSS或HTML源文件。

(早前发布的文章) -这篇文章是继另一个问题在这里问堆栈，由于问题的性质改变，评论变得相当混乱，我被要求打开一个新的线程

下面我将发布两个片段，一个是原始构建，在用户@acontell的帮助下构建。另一个例子是我所追求的结果类型，在用户@Rajesh的帮助下构建。链接到(示例源).

---

基本构建

// Control UI...
(function(domElements, cbState) {
  // Number increment
  var total = 0 + ' mm';
  document.getElementById('adjvar').value = total;
  function clickCallback() {
    toggleElements(this.className);
  }
  function toggleElements(className, initialShow) {
    var checkNumber = ((/ editoropt('d*) /).exec(className))[1],
      checkBox = document.getElementById('checkboxopt' + checkNumber),
      division = document.querySelectorAll('.editoraccvar' + checkNumber)[0],
      isShown = initialShow === undefined ? window.getComputedStyle(division).display === 'none' : initialShow;
    division.style.display = isShown ? 'block' : 'none';
    checkBox.checked = isShown;
    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // increment count...
    var val = 30;
    total += (+val * (checkBox.checked ? 1 : -1));
    document.getElementById('adjvar').value = total + ' mm';
    document.getElementsByClassName('adjvar').value = checkBox.checked ? val : 0 + ' mm';
    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  }
  domElements
    .filter(function(el) {
      return el.className.indexOf('editoropt') !== -1;
    })
    .forEach(function(el, index) {
      el.addEventListener('click', clickCallback, false);
      toggleElements(el.className, cbState[index]);
    });
})([].slice.call(document.querySelectorAll('.seq-box-form-field')), [false, false]);
// Default Checked...
if (document.getElementById('checkboxopt').checked) {
  // do nothing
} else {
  document.getElementById('checkboxopt').click();
}
// inject style
function ctSe() {
  var css = "input[type='checkbox'] { float:left; margin-right: 1em !important;}",
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
  console.log(head)
  console.log(style)
  console.log(css)
};
ctSe();

.editoraccvar {
  width: 300px;
  background: #f0f;
  padding: .5em;
}
.editoropt {
  width: 300px;
  background: #0f0;
  padding: .5em;
}
.editoraccvar1 {
  width: 300px;
  background: #0ff;
  padding: .5em;
}
.editoropt1 {
  width: 300px;
  background: #ff0;
  padding: .5em;
}
textarea {
  display: block;
  width: 95%;
  resize: none;
  padding: .5em;
}

<!-- I'm trying to hide & show this entire division... -->
<div class="seq-box-form-field  field-summernote editoraccvar  ">
  <label for="accvar1">Ground Floor Info</label>
  <div class="clearfix"></div>
  <textarea id="richaccvar1" name="richaccvar1" class="summernote"></textarea>
  <input type="hidden" name="accvar1" id="accvar1" value="" />
</div>
<!-- Using only what the system has supplied. -->
<div class="seq-box-form-field  editoropt  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Ground Floor </span>
    <input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked="true" />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>
<!-- Secondary Division -->
<div class="seq-box-form-field  field-summernote editoraccvar1  ">
  <label for="accvar1">First Floor</label>
  <div class="clearfix"></div>
  <textarea id="richaccvar1" name="richaccvar1" class="summernote"></textarea>
  <input type="hidden" name="accvar1" id="accvar1" value="" />
</div>
<!-- Secondary Checkbox -->
<div class="seq-box-form-field  editoropt1  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">First Floor </span>
    <input type="checkbox" name="checkboxopt1" id="checkboxopt1" value="true" checked="true" />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>
<input name="adjvar" id="adjvar" readonly>

---

示例

(function() {
  var total = 0;
  function calculate(index) {
    var el = document.getElementsByClassName('checkbox-input')[index];
    var val = el.getAttribute("data-value");
    total += (+val * (el.checked ? 1 : -1));
    document.getElementById('pnvar').value = total;
    document.getElementsByClassName('pnvar')[index].value = el.checked ? val : 0;
  }
  function registerEvents() {
    var cbs = document.querySelectorAll('[type="checkbox"]');
    [].forEach.call(cbs, function(cb, i) {
      cb.addEventListener("click", function() {
        calculate(i);
      });
    });
    document.getElementById('pnvar').addEventListener('keydown', function(event) {
      if (event.keyCode == 13) {
        event.preventDefault();
        return false;
      }
    })
  }
  window.addEventListener('load', function() {
    registerEvents();
    calculate(0)
  })
})()

.editoropt {
  font-family: Calibri, sans-serif;
  width: 160px;
  background: #f8f8ff;
  padding: .5em;
  border: solid 1px #ddd;
}
#checkboxopt {
  float: left;
  margin-right: 1em;
  margin-top: 4px;
}
#checkboxopt1 {
  float: left;
  margin-right: 1em;
  margin-top: 4px;
}
.pnvar {
  width: 95%;
}
input:-moz-read-only {
  /* For Firefox */
  background-color: transparent;
  border: none;
  border-width: 0px;
}
input:read-only {
  background-color: transparent;
  border: none;
  border-width: 0px;
}

<div class="seq-box-form-field  editoropt  ">
  <label for="opt1">
    <span style="padding-right: 10px; vertical-align: 1px;">Default 80mm </span>
    <input type="checkbox" class="checkbox-input" data-value="80" name="checkboxopt" id="checkboxopt" value="true" checked />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>
<div class="seq-box-form-field  editoropt  ">
  <label for="opt1">
    <span style="padding-right: 10px; vertical-align: 1px;">Add 30mm </span>
    <input type="checkbox" class="checkbox-input" name="checkboxopt1" data-value="30" id="checkboxopt1" value="true" />
    <input type="hidden" name="opt2" id="opt2" value="true" />
  </label>
</div>
<div class="editoropt">
  <input id="pnvar" name="pnvar" placeholder="Null" onkeydown="" value="" class="required" type="text">
  <input name="adjvar" class="pnvar" id="adjvar" readonly value="0">
  <input name="adjvar" class="pnvar" id="adjvar2" readonly value="0">
</div>

---

正如我在上一篇文章中提到的，我不是一个JS高手，我只是在寻找我的脚，但我渴望学习和进一步了解我的知识。非常感谢任何协助。

注意:为了与其他应用保持一致，所有的标签、类和名称必须保持不变。

// Default Checked...
if (document.getElementById('checkboxopt').checked) {
    // do nothing
} else {
    document.getElementById('checkboxopt').click();
}

([].slice.call(document.querySelectorAll('.seq-box-form-field')), [true, false]);

function updateInputValue(n) {
    var actual = +document.getElementById('adjvar').value.split(' mm')[0] || 0;
    document.getElementById('adjvar').value = (actual + n) + ' mm';
}

var increment = isShown ? 30 : -30;
updateInputValue(initialShow === undefined ? increment : +initialShow * 30);