Javascript - Showing and hiding divs according to selected checkboxes

Question

Javascript - Showing and hiding divs according to selected checkboxes

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

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

I just can not get the div from the unselected checkbox to "pop up."

HTML with 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 currently.

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 improve this?

javascript html checkbox

asked by anonymous 23.10.2015 / 14:54

2 answers

1

Gustavo, although @Randrade's Answer is 100%, I would like to review your code.

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

Try to group your checkbox by using the name tag, so it becomes clear that they should be similar to a radio .

Use a data-* attribute to make the association between checkbox and the element to be displayed.

Finally, since you should know which checkbox was previously selected and which element is being displayed, then traversing all 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>

23.10.2015 / 15:37

Comparison with compareTo and Sort PHP generating image with accents "bugados"

score 2 · Accepted Answer

Using only javascript would you use the same logic as was done with the checkbox. You will create a class and hide all elements. After that, it will go through all of them and check if it is the last id. If it is, show. If it is not, it blocks.

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 div via css, like this:

.ocult{
    display:none
}