Javascript 基于复选框值使另一个元素可见/不可见

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

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

函数输出更新（obj）{
obj.previousElementSibling.value=obj.value；
}
功能手柄点击（obj）{
obj.previousElementSibling.value=obj.value；
}

引擎
0
关闭

如果您愿意将复选框放在范围滑块之前，则只需使用CSS，即可通过在选中的

输入后使用和目标同级元素来实现这一点：


函数输出更新（obj）{
obj.previousElementSibling.value=obj.value；
}
功能手柄点击（obj）{
obj.previousElementSibling.value=obj.value；
}
#引擎关闭：选中~#引擎{显示：无；}

引擎
0
关闭
基本上：


函数输出更新（obj）{
obj.previousElementSibling.value=obj.value；
}
功能手柄点击（obj）{
//抓住滑块元件（也称为发动机）
var engine=obj.PreviousElement同级；
//获取结果元素（也称为输出）
var输出=engine.PreviousElement同级；
//抓取复选框的名称
var checkBoxName=obj.name；
console.log（'Name:'，checkBoxName）
//这两个都是相对于
//选中复选框，以便您可以拥有尽可能多的
//根据您的需要选择这些字段集，以及
//他们不会互相干涉。
//把温度调为零
输出值=0
如果（对象已选中）{//“关闭”已选中
engine.disabled=true；//隐藏滑块
}否则{
engine.disabled=false；//否则，显示它
}
obj.previousElementSibling.value=obj.value；
}

引擎
0
关闭
仪表板/控制台
0
关闭
删除所有内联javascript并改用
addEventListener
。

然后，您可以通过使用
this
和获取同级等方法获取元素，将事件绑定到循环中，并引用其他元素


var ranges=document.querySelectorAll（'fieldset input[type=range]'）；
var-box=document.querySelectorAll（'fieldset-input[type=checkbox]）；
[].slice.call（范围）.forEach（函数（范围）{
range.addEventListener（'input'，function（）{
this.previousElementSibling.value=this.value；
});
});
[].slice.call（box）.forEach（函数（box）{
box.addEventListener（'change'，function（））{
var range=this.previousElementSibling；
var事件=新事件（“输入”）；
range.value=0；
范围。dispatchEvent（事件）；
range.disabled=this.checked；
});
});

引擎
0
关闭
在这里，对您的代码进行最小的更改：）


函数输出更新（obj）{
obj.previousElementSibling.value=obj.value；
}
功能手柄点击（obj）{
obj.previousElementSibling.value=obj.value；
obj.previousElementSibling.disabled=obj.checked；
}

引擎
0
关闭
您可以在复选框中使用
onchange
事件来了解状态何时更改，而不仅仅是onclick，这样您就可以知道复选框何时被选中或未被选中。您可以使用.innerHTML来更新输出文本。我还应该说，大约有20个不同的表单滑块具有输出。因此，最好使用调用函数的id，而不是声明一个var…请参阅我更新的帖子，它应该可以做任何你想做的事情。包括20个不同形式的滑块：）解释在代码中，如果你想让我进一步详细说明，请告诉我。顺便说一句，其他一些答案告诉你要摆脱内联函数，没有必要这样做。如果您所做的只是一个表单实现，那么我上面描述的方法很简单，而且切中要害。当您觉得有必要时，继续进行更复杂的事件处理。同意：一次一步。。。接下来我将看其他答案。可爱的简洁代码。今天我从你那里学到了一些东西。谢谢；）我在想这个
[].slice.call（NodeList）
方法有多酷，然后我发现：@Moob-这是一个家伙的观点，尽管他在
[].slice.call和
forEach
中的说法是正确的，但它不是跨浏览器的，但只有在需要支持IE8或更低版本时才成立，反正再也没有人这么做了，真是太棒了！我希望滑块和输出display=“none”/display=“block”基于选中未选中。我不太明白'？代码中的true:false。我想我可以用它来添加if语句。很高兴它有帮助！那个“？：”是一个。工作原理类似于if-else语句，但更短更清晰：）在阅读了关于三元运算符的内容后，我能够添加以下内容：obj.previousElementSibling.style.display=（obj.checked）？“无”：“块”；作为旁注，根本不需要三元语句，因为
obj.checked
已经是true或false了。