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

Question

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

更改复选框时，我希望范围滑块处于非活动状态并且输出为零。

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>

我不确定如何使范围滑块在复选框上处于非活动状态/不可见。 然后，如果未选中，则使滑块再次激活/可见。

此外，复选框更改时如何使输出归零？

到目前为止，使用上面的代码，滑块效果很好，它会更新输出。 选中复选框后，滑块将根据需要变为零，但不会输出。

编辑：大约有20种不同的表单滑块带有输出。因此，最好使用调用函数的 id 而不是声明 var...

Answer 1

删除所有内联 JavaScript 并改用addEventListener。
然后，您可以获取元素，在循环中绑定事件，并使用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>

Answer 2

在这里，只需对代码进行最少的更改:)

function outputUpdate(obj) {
obj.previousElementSibling.value = obj.value;
}
function handleClick(obj) {
obj.previousElementSibling.value = obj.value;
obj.previousElementSibling.disabled = obj.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" oninput="outputUpdate(this)">
<input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this); outputUpdate(this.previousElementSibling);' value="0" />
<label for="engine-closed">Closed</label>
</fieldset>

如果需要，您可以添加可见性切换部分。

Answer 3

如果您愿意将复选框放在范围滑块之前，则可以通过使用相邻同级选择器和:checked伪类在选中input后定位同级元素，从而非常简单地使用 CSS 执行此操作：

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

#engine-closed:checked ~ #engine {display:none;}

<fieldset>
<legend><h3>Engine</h3></legend>
<input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this);' value="0" />
<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)">
<label for="engine-closed">Closed</label>
</fieldset>

如果您想要一个JS解决方案，那么只需在复选框设置如下时切换元素可见性：(更新以应对多个实例)

(function(){
function initWierdCloseRangeThingThatMakesNoSense(el){
var engine = el.querySelector("input[type='range']"),
output = el.querySelector("output"),
engineClosed = el.querySelector("input[type='checkbox']"),
setOutput = function(){
output.value = engine.value;
},
openClose = function(){
engine.style.display = (this.checked)?"none":"";
engine.value = "0";
setOutput();
};    
engine.addEventListener("change", setOutput, false);
engineClosed.addEventListener("change", openClose, false);
};

// for every fieldset:
var fieldsets = document.querySelectorAll("fieldset");

for (i=0; i<fieldsets.length; ++i){
var fs = fieldsets[i];
initWierdCloseRangeThingThatMakesNoSense(fs);
}

})();

<fieldset>
<legend><h3>Engine</h3></legend>  
<output for="engine" id="output">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>
<fieldset>
<legend><h3>Engine 2</h3></legend>  
<output for="engine2">0</output>
<input type="range" min="0" max="10" value="0" step="1" list="0-10">
<input type="checkbox" name="engine-2-closed" value="0" />
<label for="engine-3-closed">Closed</label>
</fieldset>
<fieldset>
<legend><h3>Engine 3</h3></legend>  
<output for="engine3">0</output>
<input type="range" min="0" max="10" value="0" step="1" list="0-10">
<input type="checkbox" name="engine-3-closed" value="0" />
<label for="engine-3-closed">Closed</label>
</fieldset>

更好的是，如果您要使用JS解决方案，请使用@adeneo，因为它具有出色的;)

Answer 4

本质上是这样的：

function outputUpdate(obj) {
obj.previousElementSibling.value = obj.value;
}
function handleClick(obj) {
// grab the slider element (a.k.a. engine)
var engine = obj.previousElementSibling;
// grab the result element (a.k.a. output)
var output = engine.previousElementSibling;
// grab the checkbox's name
var checkBoxName = obj.name;
console.log('Name:', checkBoxName)
// these are both grabbed relative to the
// the checkbox, so you can have as many
// of these fieldsets as you want, and
// they will not interfere with each other.

// set the out to zero
output.value = 0

if (obj.checked) { // "closed" is checked
engine.disabled = true; // hide the slider
} else {
engine.disabled = false; // otherwise, show it
}
obj.previousElementSibling.value = obj.value;
}

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