javascript - 根据使用 CSS 或 JS 选中的复选框数量隐藏 div

Question

我想根据选中的复选框数隐藏 div。 Div A 在页面加载时可见，而 div B 隐藏。如果选中的复选框总数等于 2 或大于 2，那么我想隐藏 div A 并显示 div B。

 <input class="iput" type="checkbox" name="E33" value="33" stock="20"/> A 
    <input class="iput" type="checkbox" name="E34" value="33" stock="6"/>
    <input class="iput" type="checkbox" name="E646" value="33" stock="7"/>
    <input class="iput" type="checkbox" name="E46" value="33" stock="7"/> 
    <input class="iput" type="checkbox" name="E626" value="33" stock="7"/> 
    <input class="iput" type="checkbox" name="E656" value="33" stock="7"/> 

        <div class="a"> Hello </div>
        <div class="b" style="display:none"> BYE </div>

  Total checked boxes= <span id="result"></span>

一直未能实现这一目标。目前我能够计算复选框的总数，但无法找到一种方法来使用总数来显示和隐藏 div。

      function showChecked(){
        var length = document.querySelectorAll("input:checked").length,
        text = "Total Number of Items Selected = "

    document.getElementById("result").textContent = length;
        document.getElementById("final").value = length;
}
 document.querySelectorAll("input[type=checkbox]").forEach(i=>{
  i.onclick = function(){
  showChecked();
 }
});

Answer 1

为每个复选框添加一个点击事件监听器以递增一个计数器变量，如果计数器大于或等于 2，则将 .a div 的显示属性设置为 none 和 .b div 到 block。

如果您给所有复选框都起相同的名称(如“E33”)，则可以使用 querySelector 获取所有复选框:

document.querySelectorAll("input[name=E33]");

要获取名称为“E33”的所有选中的复选框，请使用 :checked 选择器:

document.querySelectorAll("input[name=E33]:checked").length;

<input class="iput" type="checkbox" name="E33" value="33" stock="20"/> A 
<input class="iput" type="checkbox" name="E33" value="33" stock="6"/>
<input class="iput" type="checkbox" name="E33" value="33" stock="7"/>
<input class="iput" type="checkbox" name="E33" value="33" stock="7"/> 
<input class="iput" type="checkbox" name="E33" value="33" stock="7"/> 
<input class="iput" type="checkbox" name="E33" value="33" stock="7"/> 

<div class="a" id="a"> Hello </div>
<div class="b" style="display:none" id="b"> BYE </div>
<script>
var a = document.getElementById("a");
var b = document.getElementById('b');
var checked = document.querySelectorAll("input[ name=E33]:checked").length;
var checkboxes = document.querySelectorAll("input[name=E33]");
for(let i = 0; i < checkboxes.length; i++){
  checkboxes[i].addEventListener("click", function(e){
    if(this.checked){
      checked++;
      if(checked>=2){
        a.style.display = "none";
        b.style.display = "block";
      } 
    } else {
       checked--;
      if(checked<2){
        a.style.display = "block";
        b.style.display = "none";
      }
    }
  });
}
</script>

如果你想按类选择你的复选框:

<input class="input" type="checkbox" name="E33" value="33" stock="20"/> A 
<input class="input" type="checkbox" name="E34" value="33" stock="6"/>
<input class="input" type="checkbox" name="E646" value="33" stock="7"/>
<input class="input" type="checkbox" name="E46" value="33" stock="7"/> 
<input class="input" type="checkbox" name="E626" value="33" stock="7"/> 
<input class="input" type="checkbox" name="E656" value="33" stock="7"/> 

    <div class="a" id="a"> Hello </div>
    <div class="b" style="display:none" id="b"> BYE </div>
    <script>
    var a = document.getElementById("a");
    var b = document.getElementById('b');
    var checked = document.querySelectorAll("input.input:checked").length;
    var checkboxes = document.querySelectorAll("input.input");
    for(let i = 0; i < checkboxes.length; i++){
      checkboxes[i].addEventListener("click", function(e){
        if(this.checked){
          checked++;
          if(checked>=2){
            a.style.display = "none";
            b.style.display = "block";
          } 
        } else {
           checked--;
          if(checked<2){
            a.style.display = "block";
            b.style.display = "none";
          }
        }
      });
    }
    </script>