0

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();
 }
});
viiking_coder
  • 67
  • 1
  • 8

3 Answers3

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>
iota
  • 34,586
  • 7
  • 32
  • 51
0

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>
Nathan Stockton
  • 282
  • 1
  • 5
0

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:

David says reinstate Monica
  • 230,743
  • 47
  • 350
  • 385