Question

我正在尝试使某些单击某些复选框时显示一些RAG状态的显示，例如：

如果未选中任何框，则显示图像1（灰色）
如果选中第一个框，则显示图片2（红色）
如果同时选中了两个框，请显示图片3（绿色）

这旨在表明该系统不受影响（灰色），无论它是处于脱机状态（红色）还是已脱机，但现已恢复（绿色）。

我有一个html复选框和一个带有ID标记的html图像，以及所有3张上载到站点的图像，我将其添加到其中，并将以下代码脚本嵌入html中。一旦可行，一旦有人取消选中复选框，有人可以建议如何使灰色图标再次显示吗？那会很好–如果是if语句，则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

当前，您正在查询HTMLElement复选框并检查其真实性（customerImpact == true）。无论是否进行检查，它们始终是真实的。您要检查，如果复选框上的checked属性为true。

我举了一个小例子（没有图像，但是您应该很容易适应它）。我还选择使用change事件而不是click事件。

const status = document.querySelector('[data-status]');

function update() {
  const customerImpact = document.querySelector('[data-customer-impact]').checked;
  const customerImpactCleared = document.querySelector('[data-customer-impact-cleared]').checked;
  
  if (customerImpact && customerImpactCleared) {
    status.textContent = 'Recovered';
  } else if (customerImpact) {
    status.textContent = 'Offline';
  } else {
    status.textContent = 'No impact';
  }
}

update();

<p data-status></p>

<input id="customer-impact" type="checkbox" data-customer-impact onchange="update()">
<label for="customer-impact">Customer Impact</label><br>

<input id="customer-impact-cleared" type="checkbox" data-customer-impact-cleared onchange="update()">
<label for="customer-impact-cleared">Customer Impact Cleared</label>

Answer 2

如果允许稍微更改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>

有没有一种方法可以使用复选框将一个图像替换为另一个图像？

2 个答案: