javascript - 根据复选框值使另一个元素可见/不可见

Question

我完全在这里学习!我还在玩 JS。

当复选框被更改时，我希望范围 slider 处于非事件状态并且输出为零。

function outputUpdate(obj) {
  obj.previousElementSibling.value = obj.value;
}

function handleClick(obj) {
  obj.previousElementSibling.value = obj.value;
}

<fieldset>
  <legend><h3>Engine</h3></legend>
  <output for="engine" id="engine">0</output>
  <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)">
  <input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this);' value="0" /><label for="engine-closed">Closed</label>
</fieldset>

我不确定如何使范围 slider 在复选框上处于非事件状态/不可见状态。 然后，当取消选中时，使 slider 再次处于事件状态/可见状态。

更进一步，checkbox改变时如何让输出为零？

到目前为止，使用上面的代码， slider 工作得很好并且它更新了输出。 选中复选框时， slider 会根据需要归零，但不会输出。

编辑:大约有 20 种不同的带输出的表单 slider 。所以最好使用调用函数的 id 而不是声明一个 var...

Answer 1

删除所有内联 javascript 并改用 addEventListener。
然后你可以只获取元素，在循环中绑定(bind)事件，并通过使用 this 和获取兄弟元素等来引用其他元素。

var ranges = document.querySelectorAll('fieldset input[type=range]');
var boxes  = document.querySelectorAll('fieldset input[type=checkbox]');

[].slice.call(ranges).forEach(function(range) {
  range.addEventListener('input', function() {
    this.previousElementSibling.value = this.value;
  });
});

[].slice.call(boxes).forEach(function(box) {
  box.addEventListener('change', function() {
    var range = this.previousElementSibling;
    var event = new Event('input');

    range.value = 0;
    range.dispatchEvent(event);
    range.disabled = this.checked;
  });
});

<fieldset>
  <legend><h3>Engine</h3></legend>
  <output for="engine" id="engine">0</output>
  <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10">
  <input type="checkbox" name="engine-closed" id="engine-closed" value="0" />
  <label for="engine-closed">Closed</label>
</fieldset>