我用
和元素创建了一个小设置，我想根据指定复选框的状态显示或隐藏它们。当复选框被选中时，应设置display:initial，当复选框未被选中时，应设置display:none。然而，我一直在尝试找出如何用 JS 来做到这一点，但我一无所获。我的代码示例:
<p id="nr_1" style="display: initial">Number 1 Example text here </p>
<input type="checkbox" id="nr_1" checked> Number 1</input>
<p style="display: initial" id="nr_1">
<img src="src_nr_1.png">
</p>
我设法将我能找到的东西拼凑在一起，看起来像这样:
function handleClick($id) {
if (document.getElementById($id).display == checked) {
var element = document.getElementById($id);
element.style = "display:initial";
}
else {
var element = document.getElementById($id);
element.style = "display:initial";
}
}
但是，我什至无法成功地让该复选框执行任何操作。我已经尝试过使用 If/Else，只是弹出一个带有文本的警报，看看在选中和取消选中复选框时是否能够发生任何事情。从我一直在构建的结构来看，这一点可能非常明显，但我以前从未使用过 JS。我想它必须用 onClick() 或 onCheck() 做一些事情，但两者似乎都没有响应任何事情。
所以我在这里想做的是让 JS 在选中/取消选中复选框时使用react。我希望使其尽可能通用，因为将会有 10-25 个复选框，并且必须为每个不同的 HTML 元素对其进行硬编码并不是最理想的情况。复选框、文本元素和图像都有相同的 ID 来匹配它们。因此，如果选中复选框 1，则会出现文本元素 1 和图像 1。如果不加以控制，它们都会消失。任何能指引我正确方向的事情都将不胜感激。
最佳答案
对不同的元素使用相同的 id 不是您可以做的事情。相反，使用类或 data-* 属性将它们链接在一起。
执行您想要的操作的(更)可读的代码(该代码假设应根据复选框选中状态显示/隐藏的所有元素在其类中都有一个与复选框 id 名称相同的类注意:不要给复选框本身一个与其id同名的类，否则它也会消失，并且没有机会重新出现，除非你在某处编写脚本):
<!DOCTYPE html>
<html>
<head>
<style>
.display-initial { display: initial; }
.display-none { display: none; }
</style>
</head>
<body>
<p>
<p class="nr_1"> Number 1 Example text here </p>
<input type="checkbox" id="nr_1"/><label for="nr_1">Number 1</label>
<p class="nr_1"><img src="src_nr_1.png"></p>
</p>
<p>
<p class="nr_2"> Number 2 Example text here </p>
<input type="checkbox" id="nr_2" checked/><label for="nr_2">Number 2</label>
<p class="nr_2"><img src="src_nr_2.png"></p>
</p>
<p>
<p class="nr_3"> Number 3 Example text here </p>
<input type="checkbox" id="nr_3" /><label for="nr_3">Number 3</label>
<p class="nr_3"><img src="src_nr_3.png"></p>
</p>
<script>
var checkboxes = [].filter.call(document.getElementsByTagName('input'), function(element) { return element.type == "checkbox"; });
checkboxes.forEach(function (checkbox) {
function refreshDependentElements() {
[].forEach.call(document.getElementsByClassName(checkbox.id), function(dependentElement) {
if (checkbox.checked) {
dependentElement.classList.add('display-initial');
dependentElement.classList.remove('display-none');
} else {
dependentElement.classList.add('display-none');
dependentElement.classList.remove('display-initial');
}
})
}
checkbox.onclick = refreshDependentElements;
refreshDependentElements();
});
</script>
</body>
</html>
代码的问题在于，在这种状态下，它依赖于 Element.classList , Array.prototype.forEach 和 Array.prototype.filter ，并非所有浏览器都支持(最值得注意的是 IE9 及以下浏览器)。您可以包含polyfills(在链接的MDN页面中给出)，或者这是一个不依赖于它们的版本(只是上面<script>和</script>标签之间的代码):
function addClassToElement(element, className) {
var currentClasses = element.className.split(' ');
for (var iClass = 0; iClass < currentClasses.length; iClass++) {
if (currentClasses[iClass] === className) return;
}
currentClasses.push(className);
element.className = currentClasses.join(' ');
}
function removeClassFromElement(element, className) {
var currentClasses = element.className.split(' ');
var newClasses = [];
for (var iClass = 0; iClass < currentClasses.length; iClass++) {
if (currentClasses[iClass] !== className) newClasses.push(currentClasses[iClass]);
}
element.className = newClasses.join(' ');
}
var inputs = document.getElementsByTagName('input');
for (var iInput = 0; iInput < inputs.length; iInput++) {
if (inputs[iInput].type !== 'checkbox') continue;
(function (checkbox) {
checkbox.onclick = function () {
var dependentElements = document.getElementsByClassName(checkbox.id);
for (var iElement = 0; iElement < dependentElements.length; iElement++) {
if (checkbox.checked) {
addClassToElement(dependentElements[iElement], 'display-initial');
removeClassFromElement(dependentElements[iElement], 'display-none');
} else {
addClassToElement(dependentElements[iElement], 'display-none');
removeClassFromElement(dependentElements[iElement], 'display-initial');
}
}
}
checkbox.onclick();
})(inputs[iInput]);
}
此代码适用于所有主要浏览器( IE5.5+ ，所以没有问题)。
关于javascript - HTML 元素显示 :initial or display:none changing upon checkbox state，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30527139/