Javascript - Showing and hiding Ivs according to selected checkboxes

Question

I own the site with 9 checkboxes, each associated with a div. When a checkbox is selected, the related div is shown. When another checkbox is selected, the div related to that other one is also shown. For example, chkCamp1 shows optCamp1. chkCamp2 shows optCamp2 and "some" with optCamp1, since chkCamp1 is deselected.

I just can’t get the div from the deselected checkbox to "disappear" from the screen.

HTML with the nine checkboxes:

<input id="chkCamp1" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp1', this)">
<input id="chkCamp2" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp2', this)">
<input id="chkCamp3" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp3', this)">
<input id="chkCamp4" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp4', this)">
<input id="chkCamp5" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp5', this)">
<input id="chkCamp6" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp6', this)">
<input id="chkCamp7" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp7', this)">
<input id="chkCamp8" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp8', this)">
<input id="chkCamp9" type="checkbox" class="cb" style="margin-left: -25px" onclick="showMe('optCamp9', this)">

And the showMe function as it is at the moment.

function showMe(it, elem){
        var elems = document.getElementsByClassName("cb");
        var currentState = elem.checked;
        var elemsLength = elems.length;

        for(i=0; i<elemsLength; i++){
            if(elems[i].type === "checkbox"){
                elems[i].checked = false;   
            }
        }
        elem.checked = currentState;

        if(elem.checked = true){
            document.getElementById(it).style.display = 'block';
        }
        else{
            document.getElementById(it).style.display = 'none';
        }
    }

How can I make it better?

Answer 1

Using only javascript you would use the same logic as the checkbox. You will create a class and hide all the elements. After that, you will scroll through all and check if it is the past id. If it is, it shows. If it’s not, block it.

Your code will look like this

function showMe(it, elem){
  var elems = document.getElementsByClassName("cb");
  var currentState = elem.checked;
  var elemsLength = elems.length;

  for(i=0; i<elemsLength; i++){
    if(elems[i].type === "checkbox"){
      elems[i].checked = false;   
    }
  }
  elem.checked = currentState;
  var elements = document.getElementsByClassName('ocult');            
  for(j=0; j < elements.length; j++){
    if(elements[j].id != it || currentState == false){
      elements[j].style.display = "none";
    }else{
      elements[j].style.display = "block";
    }
  }         
}

.ocult{
    display:none
}

<input id="chkCamp1" type="checkbox" class="cb"  onclick="showMe('optCamp1', this)" />1
<input id="chkCamp2" type="checkbox" class="cb"  onclick="showMe('optCamp2', this)" />2
<input id="chkCamp3" type="checkbox" class="cb"  onclick="showMe('optCamp3', this)" />3
<input id="chkCamp4" type="checkbox" class="cb"  onclick="showMe('optCamp4', this)" />4
<input id="chkCamp5" type="checkbox" class="cb"  onclick="showMe('optCamp5', this)" />5
<input id="chkCamp6" type="checkbox" class="cb"  onclick="showMe('optCamp6', this)" />6
<input id="chkCamp7" type="checkbox" class="cb"  onclick="showMe('optCamp7', this)" />7
<input id="chkCamp8" type="checkbox" class="cb"  onclick="showMe('optCamp8', this)" />8
<input id="chkCamp9" type="checkbox" class="cb"  onclick="showMe('optCamp9', this)" />9

<div id="optCamp1" class="ocult">1</div>    
<div id="optCamp2" class="ocult">2</div>    
<div id="optCamp3" class="ocult">3</div>    
<div id="optCamp4" class="ocult">4</div>    
<div id="optCamp5" class="ocult">5</div>    
<div id="optCamp6" class="ocult">6</div>    
<div id="optCamp7" class="ocult">7</div>    
<div id="optCamp8" class="ocult">8</div>    
<div id="optCamp9" class="ocult">9</div>

Remembering that this way I’m hiding the div via css, like this:

.ocult{
    display:none
}

Answer 2

Gustavo, although the @Randrade Answer is 100%, I would like to perform a review in your code.

Try not to put Java and CSS inline in your HTML, then remove tags style and onclick.

Try to group your checkbox using the tag name, so it becomes clearer that they should have a similar behavior to that of a radio.

use an attribute data-* to make the association between the checkbox and the element to be displayed.

Finally, since you must know which checkbox was previously selected and which element is being displayed, so go through all the checkbox is unnecessary, just change the properties of it.

As for the HTML Markup below, just ignore it, added the label just to improve the example.

function initChkGroup (chkName) {
  var chkCamps = document.querySelectorAll("[name='" + chkName + "']");
  var chkSel = document.querySelector("[name='" + chkName + "']:checked");
  
  var optSel = null; 
  if (chkSel) {
    optSel = document.getElementById(chkSel.dataset.opt);
    optSel.classList.remove("hidden");
  }

  var onChkCampChange = function (event) {   
    if (chkSel) {
      chkSel.checked = false;
      optSel.classList.add("hidden");
    }
    
    if (event.target.checked) {
      chkSel = event.target;
      optSel = document.getElementById(chkSel.dataset.opt);
      optSel.classList.remove("hidden");
    } else {      
      chkSel = null;
      optSel = null;
    }
  };

  [].forEach.call(chkCamps, function (chkCamp, indice) {
    chkCamp.addEventListener("change", onChkCampChange);
  });  
};

initChkGroup("chkCamp");

.cb {
  margin-left: 25px;
}

.hidden {
  display: none;
}

<div>
  <input id="chkCamp1" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp1" /> 
  <label for="chkCamp1">optCamp1</label>  
</div>
<div>
  <input id="chkCamp2" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp2" /> 
  <label for="chkCamp2">optCamp2</label>  
</div>
<div>
  <input id="chkCamp3" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp3" /> 
  <label for="chkCamp3">optCamp3</label>  
</div>
<div>
  <input id="chkCamp4" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp4" checked /> 
  <label for="chkCamp4">optCamp4</label>  
</div>
<div>
  <input id="chkCamp5" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp5" /> 
  <label for="chkCamp5">optCamp5</label>  
</div>
<div>
  <input id="chkCamp6" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp6" /> 
  <label for="chkCamp6">optCamp6</label>  
</div>
<div>
  <input id="chkCamp7" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp7" /> 
  <label for="chkCamp7">optCamp7</label>  
</div>
<div>
  <input id="chkCamp8" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp8" /> 
  <label for="chkCamp8">optCamp8</label>  
</div>
<div>
  <input id="chkCamp9" type="checkbox" name="chkCamp" class="cb" data-opt="optCamp9" /> 
  <label for="chkCamp9">optCamp9</label>  
</div>

<div id="optCamp1" class="hidden">optCamp1</div>
<div id="optCamp2" class="hidden">optCamp2</div>
<div id="optCamp3" class="hidden">optCamp3</div>
<div id="optCamp4" class="hidden">optCamp4</div>
<div id="optCamp5" class="hidden">optCamp5</div>
<div id="optCamp6" class="hidden">optCamp6</div>
<div id="optCamp7" class="hidden">optCamp7</div>
<div id="optCamp8" class="hidden">optCamp8</div>
<div id="optCamp9" class="hidden">optCamp9</div>