[在Java中检查多个复选框状态时如何防止重复的代码？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[在Java中检查多个复选框状态时如何防止重复的代码？相关的知识，希望对你有一定的参考价值。
我正在制作一种复选框形式，用于在“选中”属性为true或false时显示图像。第一个复选框现在可以使用了，但是我不清楚如何减少所需的代码量，因为每个复选框本质上都是相同的。
我要显示图像的工作功能写在下面：
const pepperoniCheckbox = document.getElementById("pepperoniCheckbox");
const pepperoniImage = document.getElementById("pepperoni-image");
document.getElementById("pepperoniCheckbox").onclick = function() {
if (this.checked) {
pepperoniImage.style.visibility = "visible";
} else {
pepperoniImage.style.visibility = "hidden";
}
};
图像和复选框的html也在这里：
<div class="ingredients-boxes" style="padding-top: 200px">
<input type="checkbox" value="pepperoni" id="pepperoniCheckbox" />
<label for="pepperoni"> Pepperoni </label>
<input type="checkbox" value="olives" id="olivesCheckbox" />
<label for="olives"> Olives </label>
</div>
<main>
<div class="pizza-holder">
<img class="pizza" src="pizza-hut-crust-pan-pizza-food-delivery-pizza.jpg" />
<img class="pizza pepperoni" id="pepperoni-image" src="pepperoni-transparent.png" />
</div>
</main>
我确定有一种方法可以在以后添加的复选框和内容中复制此效果，但我无法将其包裹住。我认为每个复选框都需要有一个onclick事件，它们都指向同一个函数，而不是像我上面所做的那样将函数放在每个复选框变量上。
答案
许多方法可以做到，但是一个简单的方法是这样：
创建一个将元素作为选项的JS函数，并使用它来构建id（假设您保持一致的命名约定）：
function isChecked(e) {
if (e.checked) {
document.getElementById(e.value + '-image').style.visibility = "visible";
} else {
document.getElementById(e.value + '-image').style.visibility = "hidden";
}
}
然后在HTML中，向每个元素添加onclick：
<input type="checkbox" value="pepperoni" id="pepperoniCheckbox" onclick="isChecked(this);"/>
另一答案
答案
您可以将事件委托与Element.prototype.matches和event.target一起使用。
工作示例：
const parent = document.querySelector(".ingredients-boxes");
parent.addEventListener("click", function(event) {
const element = event.target;
if(element.matches("input[type='checkbox']")) {
const image = document.querySelector("#" + element.value + "-image");
if (element.checked) {
image.style.visibility = "visible";
} else {
image.style.visibility = "hidden";
}
}
});<div class="ingredients-boxes" style="padding-top: 200px">
<input type="checkbox" value="pepperoni" id="pepperoniCheckbox" />
<label for="pepperoni"> Pepperoni </label>
<input type="checkbox" value="olives" id="olivesCheckbox" />
<label for="olives"> Olives </label>
</div>
<main>
<div class="pizza-holder">
<img class="pizza" src="pizza-hut-crust-pan-pizza-food-delivery-pizza.jpg" />
<img class="pizza pepperoni" id="pepperoni-image" src="pepperoni-transparent.png" />
<img class="pizza olives" id="olives-image" src="pepperoni-transparent.png" />
</div>
</main>以上是关于[在Java中检查多个复选框状态时如何防止重复的代码？的主要内容，如果未能解决你的问题，请参考以下文章