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

Question

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.

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

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.

      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

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 .a div to none and the .b div to block .

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

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

To get all checked checkboxes with the name "E33", use the :checked selector:

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> 

If you want to select your checkboxes by class:

 <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

A function to scan all of your elements would be the easiest way.

In this example, I have created a function named getAmountChecked which scans all checkboxes with the class 'iput'. This then calculates how many there were, how many are checked and how many aren't checked; I like to have access to any important info when I check things like this. This comes in the form of an object with the values totalItems , totalChecked and totalUnchecked .

My function verifyInputs calls getAmountChecked and uses the value of totalChecked to determine which elements to show/hide.

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

This is, with caveats, possible entirely in 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 .

With the CSS above I've used the tilde ( ~ ) operator, the general-sibling combinator; this selects a following sibling element. The selector:

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

will match div.b if two, or more, <input> elements are checked.

This approach works. But, on to the caveats: if there are multiple groups of radio-buttons each group followed by the <div> elements, checking <input> elements in the first group – by virtue of the ~ combinator – will also select, and style, the <div> elements in the second group:

 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 .

To prevent this each of the 'groups' must be wrapped in an element to prevent the general-sibling combinator from matching elements in subsequent groups:

 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 .

Further, a common UI approach for <input> elements is to wrap them in a <label> element in order for a click on the text/content of the <label> to check/uncheck the check-box.

If these check-boxes are wrapped in a <label> then, predictably, the general-sibling combinator will be unable to select the <div> elements based on the state of the <input> elements (see: " Is there a CSS parent selector? "). <label> elements can, of course, appear as siblings (or any other relationship) to the <input> elements; although this requires that each <input> with a <label> in the document must have an id property in order for an association to be formed:

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

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

JS Fiddle demo .

More sensibly, and to allow styling of those <label> elements to reflect the styling of the checked/unchecked nature of the <input> elements they would follow the elements (although it's perfectly valid to associate one <input> with multiple <label> elements, and in this demo I'm leaving the badly-placed original group in place to demonstrate that multiple <label> elements associated with a single <input> works):

 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; } /* styling the <label> adjacent to an <input>: */ input+label { color: #000; background-color: #fff; } /* styling the <label> adjacent to a checked <input>: */ input:checked+label { color: #fff; background-color: limegreen; } 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; } 

 <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"><label for="a">a</label> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="b"><label for="b">b</label> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="c"><label for="c">c</label> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="d"><label for="d">d</label> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="e"><label for="e">e</label> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="f"><label for="f">f</label> <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"><label for="g">g</label> <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="h"><label for="h">h</label> <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="i"><label for="i">i</label> <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="j"><label for="j">j</label> <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="k"><label for="k">k</label> <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="l"><label for="l">l</label> <div class="a"> Hello </div> <div class="b"> BYE </div> </fieldset> </form> 

JS Fiddle demo .

References:

• Combinators:
  • Adjacent-sibling ( + ) .
  • General-sibling ( ~ ) .
• :checked pseudo-class .