blocks|key|4097513|text|在每个复选框中添加一个单击事件侦听器以递增计数器变量，如果计数器大于或等于2，则将.a+div的display属性设置为none，将.b+div设置为block。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4097514|如果您为所有复选框指定相同的名称(如“E33”)，则可以使用querySelector获取所有复选框：|4097515|document.querySelectorAll("input[name=E33]");|code-block|syntax|javascript|4097516|要选中名称为"E33“的所有复选框，请使用:checked选择器：|4097517|document.querySelectorAll("input[name=E33]:checked").length;|4097518|​|4097519|<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%2B%2B){
++checkboxes[i].addEventListener("click",+function(e){
++++if(this.checked){
++++++checked%2B%2B;
++++++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>|4097520|4097521|如果要按类选择复选框，请执行以下操作：|4097522|4097523|<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%2B%2B){
++++++checkboxes[i].addEventListener("click",+function(e){
++++++++if(this.checked){
++++++++++checked%2B%2B;
++++++++++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>|4097524|4097525|entityMap^0|15|2|1O|4|1U|2|23|5|0|0|0|L|8|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|U|3|R|5|6|7|1K|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1L|8|@]|D|@]|E|$]]|$1|X|3|R|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|10|3|R|5|6|7|1O|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|12|$]]

<p>Add a click event listener to each of the checkboxes to increment a counter variable and if the counter is more than or equal to 2, set the display property of the <code>.a</code> div to <code>none</code> and the <code>.b</code> div to <code>block</code>.</p>

<p>You can use a querySelector to get all of your checkboxes if you give them all the same name (like "E33"):</p>

<pre><code>document.querySelectorAll("input[name=E33]");
</code></pre>

<p>To get all checked checkboxes with the name "E33", use the <code>:checked</code> selector:</p>

<pre><code>document.querySelectorAll("input[name=E33]:checked").length;
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="iput" type="checkbox" name="E33" value="33" stock="20"/&gt; A 
&lt;input class="iput" type="checkbox" name="E33" value="33" stock="6"/&gt;
&lt;input class="iput" type="checkbox" name="E33" value="33" stock="7"/&gt;
&lt;input class="iput" type="checkbox" name="E33" value="33" stock="7"/&gt; 
&lt;input class="iput" type="checkbox" name="E33" value="33" stock="7"/&gt; 
&lt;input class="iput" type="checkbox" name="E33" value="33" stock="7"/&gt; 

&lt;div class="a" id="a"&gt; Hello &lt;/div&gt;
&lt;div class="b" style="display:none" id="b"&gt; BYE &lt;/div&gt;
&lt;script&gt;
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 &lt; checkboxes.length; i++){
  checkboxes[i].addEventListener("click", function(e){
    if(this.checked){
      checked++;
      if(checked&gt;=2){
        a.style.display = "none";
        b.style.display = "block";
      } 
    } else {
       checked--;
      if(checked&lt;2){
        a.style.display = "block";
        b.style.display = "none";
      }
    }
  });
}
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>If you want to select your checkboxes by class:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="input" type="checkbox" name="E33" value="33" stock="20"/&gt; A 
&lt;input class="input" type="checkbox" name="E34" value="33" stock="6"/&gt;
&lt;input class="input" type="checkbox" name="E646" value="33" stock="7"/&gt;
&lt;input class="input" type="checkbox" name="E46" value="33" stock="7"/&gt; 
&lt;input class="input" type="checkbox" name="E626" value="33" stock="7"/&gt; 
&lt;input class="input" type="checkbox" name="E656" value="33" stock="7"/&gt; 

    &lt;div class="a" id="a"&gt; Hello &lt;/div&gt;
    &lt;div class="b" style="display:none" id="b"&gt; BYE &lt;/div&gt;
    &lt;script&gt;
    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 &lt; checkboxes.length; i++){
      checkboxes[i].addEventListener("click", function(e){
        if(this.checked){
          checked++;
          if(checked&gt;=2){
            a.style.display = "none";
            b.style.display = "block";
          } 
        } else {
           checked--;
          if(checked&lt;2){
            a.style.display = "block";
            b.style.display = "none";
          }
        }
      });
    }
    &lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>I want to hid divs based on number of check boxes checked. Div A is visible on page load while div B is hidden. If total number of checkboxes checked is equal 2 or great than 2 than i want to hide div A and show div B.</p>

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

        &lt;div class="a"&gt; Hello &lt;/div&gt;
        &lt;div class="b" style="display:none"&gt; BYE &lt;/div&gt;

  Total checked boxes= &lt;span id="result"&gt;&lt;/span&gt;
</code></pre>

<p>Have constantly failed to achieve this. Currently i am able to count the total checked boxes but unable to find a way to use the total count to show and hide divs. </p>

<pre><code>      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=&gt;{
  i.onclick = function(){
  showChecked();
 }
});
</code></pre>


Hide divs based on number of check boxes checked with CSS or JS

我想根据选中的复选框的数量来隐藏div。Div A在页面加载时是可见的，而div B是隐藏的。如果选中的复选框总数等于2或大于2，则我希望隐藏div A并显示div B。 <input class="iput" type="checkbox" name="E33" value="33" stock="20"/> A  ...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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