Question

昨天我在这里问了类似的问题，并且能够进一步给出给出的答案，但是遇到了另一个我一直想弄清楚的问题。

当前功能：如果您单击复选框，它将正确地将父div的背景更改为红色（如果它包含对应的所选复选框/类别）。如果取消选中 all 复选框，它将返回蓝色。

问题：：如果您选择了多个框，然后取消选择，则取消选中后未正确地将未选中的框还原为蓝色。仅当未选中 all 框时，才会发生这种情况。

问：我应该如何对其进行编程，以便当您取消选择框时，它会立即将正确的div恢复为蓝色？

（奇怪的是，此代码仅包含“ item”而不包含“ .parentElement”。谁能说清楚为什么会这样吗？）

<script>
var theID = document.querySelectorAll('#result1, #result2, #result3');

function change(){
    var checkboxes = document.getElementsByClassName('checkbox');
    var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
    var allAreUnselected = chekboxInputs.every(function(elem){
       return !elem.checked;
    });
    if(allAreUnselected){
       chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
              item.style.display = 'block';
                            item.parentElement.style.background = "blue";
          });
       });
    }
    else {
      chekboxInputs.forEach(function(input){
          Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
            if(item.style.display = input.checked) {
                item.style.display = 'block';
              item.parentElement.style.background = 'red';
            } else {
                item.style.display = 'none';
            }
          });
       });
    }
}
change();
</script>

谢谢

Answer 1

根据您的问题，看来您希望父div在您取消选中某个框时就变成蓝色，而在您选中该框时就应该变成红色，对吗？

如果是这种情况，则if / else语句存在逻辑错误。唯一可以将父级设置为蓝色的时间是在检查if(allAreUnselected)时，因此，只有在未选中所有选项的情况下，才看到框变为蓝色是很有意义的。

要实现我认为的目标（在任何检查中，将其变为蓝色，在任何取消检查中，将其变为红色），则只需查看更改事件中正在发送的值即可。

有几种方法可以执行此操作，但是您可以执行以下操作：

function change(evt) {
    if (evt.target.checked) {
        // TURN BLUE
    } else {
        // TURN RED
        // Check if all are unchecked then turn blue if you want here
    }
}

Answer 2

因此，现在，您在此处拥有的唯一使事情变蓝的代码是以下部分：

if(allAreUnselected){
   chekboxInputs.forEach(function(input){
      Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
          item.style.display = 'block';
                        item.parentElement.style.background = "blue";
      });
   });
}

因此，"blue"是allAreUnselected的唯一时间是true。

当仍选中一个或多个复选框时，此块将处理逻辑

  chekboxInputs.forEach(function(input){
      Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
        if(item.style.display = input.checked) {
            item.style.display = 'block';
          item.parentElement.style.background = 'red';
        } else {
            item.style.display = 'none';
        }
      });
   });

因此，它遍历每个复选框，如果选中它们，则将其连接的div的颜色更改为红色。问题是，我们不能只说“如果选中，则变成红色/如果未被选中，则变成蓝色”，因为这将覆盖最后选中的一个。

我可能会说一些话，对不起，我正在尝试解决这个问题。因此，这是解决此问题的最简单方法。

清除时，不要将所有内容都设置为蓝色，而是始终将所有内容设置为蓝色。然后遍历并标记为红色（如果已检查）。

例如：

var theID = document.querySelectorAll('#result1, #result2, #result3');

function change(){
    var checkboxes = document.getElementsByClassName('checkbox');
    var chekboxInputs = Array.from(checkboxes).map(a => a.querySelector('input'));
    var allAreUnselected = chekboxInputs.every(function(elem){
       return !elem.checked;
    });
  chekboxInputs.forEach(function(input){
    Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
      item.style.display = 'block';
      item.parentElement.style.background = "blue";
    });
  });
  chekboxInputs.forEach(function(input){
    Array.from(document.querySelectorAll("." + input.getAttribute("rel"))).forEach(function(item){
      if(item.style.display = input.checked) {
        item.style.display = 'block';
        item.parentElement.style.background = 'red';
      } else {
        item.style.display = 'none';
      }
    });
  });
}

我当然认为可能还有其他/更好的方法来解决您的问题，但是我认为这只是使用您已经编写的代码进行了很小的更改即可完成的工作。

因此，每次调用该函数时-一切都设置为BLUE，然后根据复选框将所有需要设置为RED的东西都设置为红色。设置成蓝色然后变成红色的速度足够快，不会闪烁-代码在屏幕上进行任何更改之前就运行。

复选框过滤器。（需要协助功能逻辑）

2 个答案:

复选框过滤器。 （需要协助功能逻辑）

2 个答案:

复选框过滤器。（需要协助功能逻辑）