javascript - 使用复选框来控制 Input.value(有一个恼人的扭曲。)

Question

几天来，我一直在研究使用复选框控制 UI 的方法，并且在 Stack 上一些成员的帮助下，我已经取得了很大进展。但我的秃顶还没有完全停止。我一直在尝试通过在我的 UI Controller 旁边包含一个数值来进一步调整我的代码片段。 (此值稍后将在 web-java 小程序中使用。)

For example, when a checkbox is checked var total is ammended from 0 to 30. If a Checkbox is unchecked the value returns to '0'.

(Main Build JS Fiddle) , (Checkbox Example) .

第二个 fiddle 允许使用数据属性，但是这些需要通过 JS 注入(inject)到 HTML 中。和以前一样，我对 CSS 或 HTML 源文件具有“NO”访问权限。

(Original Post) - This post is a follow on from another question asked here on stack, due to the nature of the question changing, and the comments getting fairly confusing I was asked to open a new thread.

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

---

基础构建

// 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 高手，我只是刚刚站稳脚跟，但我渴望学习和扩展我的知识。任何帮助将不胜感激。

注意:所有标签、类和名称必须保持相同以与另一个应用程序保持一致。

Answer 1

我可能错了，但我认为这两行代码:

// Default Checked...

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

如果您将 [true, false] 作为复选框的初始状态，则可以避免:

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

我可能错了，您可能正在做其他事情，或者页面状态可能需要点击，我不知道。

回到问题上，如果你想在checkbox被选中/不选中时增加/减少30，你可以这样做:

创建一个函数来检索输入的值并使用添加到其中的数量更新它。输入的值是 'x mm' 形式的字符串，因此需要进行一些修改才能获得值的整数部分。

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

在 toggleElement 中调用此函数以更新输入值。

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

它变得有点复杂，因为您必须控制输入的初始状态，但这并不难:如果它是初始状态，initialShow 与 undefined 不同，因此我们将值(它是 bool 值)转换为数字a 乘以 30(选中时为 1 * 30，未选中时为 0 * 30)。当它不是初始状态时，我们根据它是否被选中来递增/递减。

这是 fiddle (我也注释掉了点击复选框的部分)。希望对您有所帮助。