Question

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

例如，选中复选框后，var total会从0推荐给30。如果取消选中复选框，则该值将返回“0”。

(Main Build JS Fiddle)， (Checkbox Example)

第二个小提琴允许使用数据属性，但这些需要通过JS注入HTML。就像之前我对' NO '访问CSS或HTML源文件一样。

(Original Post) - 这篇帖子是关于堆栈上另一个问题的后续问题，由于问题的性质发生了变化，而且评论变得相当混乱，我被要求打开一个新帖子。

下面我将发布两个片段，一个是原始版本，在用户@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 Whiz，我只是找到了自己的脚，但是我很有兴趣学习并进一步了解我的知识。任何帮助将不胜感激。

注意：所有标签，类和名称必须与其他应用程序保持一致。

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]);

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

回到问题，如果要在选中/取消选中复选框时增加/减少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不同，所以我们将值（它是一个布尔值）转换为数字a乘以30（当它被检查时，它是1 * 30，当它未经检查时它将是0 * 30）。当它不是初始状态时，我们根据是否检查来递增/递减。

这是fiddle（我还注释了点击复选框的部分）。希望它有所帮助。

使用复选框控制Input.value（带有令人讨厌的扭曲。）

1 个答案: