javascript - 有没有办法使用复选框将一张图像替换为另一张图像？

Question

我试图让显示器在单击某些复选框时显示 RAG 状态，例如:

如果没有选中任何框，则显示图像 1(灰色)
如果选中第一个框，则显示图像 2(红色)
如果两个框都被选中，则显示图像 3(绿色)

这意味着系统不受影响(灰色)，无论是离线(红色)还是离线但现已恢复(绿色)。

我有一个 html 复选框和一个带有 ID 标签的 html 图像，以及上传到我将添加到该站点的所有 3 个图像，并在 html 中嵌入了以下代码脚本。一旦这个工作正常，有人可以建议如何在取消选中复选框后再次显示灰色图标，那就太好了 - If 语句在取消选中时是否有效，因为它是一个点击事件？

Javascript:

  function customerImpact();
    var customerImpactIcon = documet.getElementById("customerImpactIcon");
    var customerImpact = document.getElementById("customerImpact");
    var customerImpactCleared = document.getElementById("customerImpactCleared");

     if (customerImpact == true){
      if (customerImpactCleared == true){
       customerImpactIcon.src="image3.jpg"
       }
      else {
       customerImpactIcon.src="image2.jpg"
       }
      }
     else { 
      customerImpactIcon.src="image1.jpg"
      }
     }

HTML:

<img src="image1.jpg" id="customerImpactIcon" alt="customerImpact" width="70" height="118" />
<input type="checkbox" id="customerImpact" onclick="customerImpact()">
<input type="checkbox" id="customerImpactCleared">

Answer 1

如果允许您稍微更改 HTML，则根本不需要 Javascript。使用 CSS 就足够了。

#status {
  width: 100px;
  height: 100px;
  background-image: url("https://via.placeholder.com/100/33333");
}

#customerImpact:checked+#customerImpactCleared:not(:checked)+#status {
  background-image: url("https://via.placeholder.com/100/FF0000");
}

#customerImpact:checked+#customerImpactCleared:checked+#status {
  background-image: url("https://via.placeholder.com/100/008000");
}

<input type="checkbox" id="customerImpact">
<input type="checkbox" id="customerImpactCleared">
<div id="status"></div>