如何根据CSS或JS选中的复选框数目隐藏div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (214)

我想根据选中的复选框数量隐藏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();
 }
});
提问于
用户回答回答于

将单击事件侦听器添加到每个复选框中,以增加计数器变量,如果计数器大于或等于2,则设置.anone.bblock.

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

document.querySelectorAll("input[name=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>

如果你想通过类来选择checkboxes:

<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>

用户回答回答于

一个扫描所有元素的函数将是最简单的方法。

在这个例子中,我创建了一个名为getAmountChecking的函数,它使用类'iput'扫描所有复选框。 然后计算出有多少,检查了多少以及未检查了多少; 当我检查这样的事情时,我喜欢访问任何重要信息。 这是一个对象的形式,其值为totalItems,totalChecked和totalUnchecked。

我的函数verifyInputs调用getAmountChecking并使用totalChecked的值来确定要显示/隐藏的元素。

<!DOCTYPE html>
<html>
    <head>
        <script language="javascript">
        function getAmountChecked(className) {
            var registeredInputs = document.getElementsByClassName(className);
            var totalChecked = 0;
            for(var i = 0; i < registeredInputs.length; i++) {
                totalChecked+=registeredInputs[i].checked==true;
            }
            return {totalItems: registeredInputs.length, totalChecked:totalChecked, totalUnchecked: registeredInputs.length-totalChecked};
        }
        function verifyInputs(className) {
            var checkCount = getAmountChecked(className);
            document.getElementById('a').style.display = checkCount.totalChecked < 2 ? 'block' : 'none';
            document.getElementById('b').style.display = checkCount.totalChecked >= 2 ? 'block' : 'none';
        }
        </script>
    </head>
    <body>
       <input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E33" value="33" stock="20"/>
        <input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E34" value="33" stock="6"/>
        <input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E646" value="33" stock="7"/>
        <input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E46" value="33" stock="7"/> 
        <input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E626" value="33" stock="7"/> 
        <input class="iput" onclick="verifyInputs('iput')" type="checkbox" name="E656" value="33" stock="7"/> 

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

    </body>
</html>

扫码关注云+社区

领取腾讯云代金券