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的display属性设置为none，然后将从.b格到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>

Answer 2

扫描所有元素的功能是最简单的方法。

在此示例中，我创建了一个名为 getAmountChecked 的函数，该函数可扫描带有“ iput”类的所有复选框。然后，计算出有多少个，被检查了多少个和未被检查了多少个；我喜欢在查看此类信息时访问任何重要信息。这以具有值 totalItems ， totalChecked 和 totalUnchecked 的对象的形式出现。

我的函数 verifyInputs 调用 getAmountChecked 并使用 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>

Answer 3

需要注意的是，这完全可以在CSS中实现：

/* styling the <div> element with a class of "a",
   the 'default' state and the state in which
   one of the <input> elements are checked: */
div.a,
input:checked~div.a {
  display: block;
}

/* styling the <div> element with the class of 'b',
   and also the <div> element with the class of 'a'
   when it's preceded by two <input> elements that
   are checked: */
div.b,
input:checked~input:checked~div.a {
  display: none;
}

/* finally we show the <div> with a class of 'b'
   when it's preceded by two <input> elements
   both of which are checked: */
input:checked~input:checked~div.b {
  display: block;
}

div.a,
input:checked~div.a {
  display: block;
}

div.b,
input:checked~input:checked~div.a {
  display: none;
}

input:checked~input:checked~div.b {
  display: block;
}

<input class="iput" type="checkbox" name="E33" value="33" stock="20" />
<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"> BYE </div>

JS Fiddle demo。

在上面的CSS中，我使用了波浪号（~）运算符，即同级组合器。这将选择以下同级元素。选择器：

`input:checked ~ input:checked ~ div.b`

如果选中两个或更多div.b元素，则

将与<input>匹配。

此方法有效。但是，需要注意的是：如果存在多组单选按钮，则每组后跟<div>元素，请借助<input>组合器检查第一组中的~元素–还将选择第二组中的<div>元素并设置其样式：

div.a,
input:checked~div.a {
  display: block;
}

div.b,
input:checked~input:checked~div.a {
  display: none;
}

input:checked~input:checked~div.b {
  display: block;
}

<input class="iput" type="checkbox" name="E33" value="33" stock="20" />
<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"> BYE </div>

<input class="iput" type="checkbox" name="E33" value="33" stock="20" />
<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"> BYE </div>

JS Fiddle demo。

为防止这种情况，每个“组”必须包装在一个元素中，以防止通用同级组合器匹配后续组中的元素：

div.a,
input:checked~div.a {
  display: block;
}

div.b,
input:checked~input:checked~div.a {
  display: none;
}

input:checked~input:checked~div.b {
  display: block;
}

<div>
  <input class="iput" type="checkbox" name="E33" value="33" stock="20" />
  <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"> BYE </div>
</div>
<div>
  <input class="iput" type="checkbox" name="E33" value="33" stock="20" />
  <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"> BYE </div>
</div>

JS Fiddle demo。

此外，用于<input>元素的常见UI方法是将它们包装在<label>元素中，以便单击<label>的文本/内容以选中/取消选中复选框。

如果将这些复选框包装在<label>中，那么可以预见的是，同级组合器将无法基于<div>元素的状态选择<input>元素（请参阅：“ Is there a CSS parent selector?”）。 <label>元素当然可以显示为<input>元素的同级（或任何其他关系）；尽管这要求文档中每个带有<input>的{{1}}必须具有<label>属性才能形成关联：

id

label {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  text-align: center;
  line-height: 1.4em;
  box-shadow: 0 0 0 1px #000;
  border-radius: 0.2em;
  cursor: pointer;
  margin: 0 0.2em;
}

div.a,
input:checked~div.a {
  display: block;
}

div.b,
input:checked~input:checked~div.a {
  display: none;
}

input:checked~input:checked~div.b {
  display: block;
}

JS Fiddle demo。

更明智的做法是，使这些<form> <fieldset> <legend>All the labels</legend> <fieldset> <legend>One</legend> <label for="a">a</label> <label for="b">b</label> <label for="c">c</label> <label for="d">d</label> <label for="e">e</label> <label for="f">f</label> </fieldset> <fieldset> <legend>Two</legend> <label for="g">g</label> <label for="h">h</label> <label for="i">i</label> <label for="j">j</label> <label for="k">k</label> <label for="l">l</label> </fieldset> </fieldset> <fieldset> <legend>Group 1</legend> <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="a"> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="b"> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="c"> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="d"> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="e"> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="f"> <div class="a"> Hello </div> <div class="b"> BYE </div> </fieldset> <fieldset> <legend>Group 2</legend> <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="g"> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="h"> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="i"> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="j"> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="k"> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="l"> <div class="a"> Hello </div> <div class="b"> BYE </div> </fieldset> </form>元素的样式反映出<label>元素的选中/未选中性质的样式，它们将跟随这些元素（尽管关联一个{ {1}}包含多个<input>元素，在此演示中，我将放置位置不正确的原始组演示了与单个<input>关联的多个<label>元素的工作）：

<label>

<input>

JS Fiddle demo。

参考文献：

组合器：
- Adjacent-sibling (+)。
- General-sibling (~)。
:checked pseudo-class。

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

3 个答案: