using javascript i am displaying check boxes with some lists

Question

I am printing list of arrays using checkboxes, the scenario is if I click one checkbox it display a list of numbers in the array, so my problem is if I click any checkbox it is displaying if I uncheck list is still in the display? so I want the code for, if I uncheck my list should go and when I click it should display.

 var men=[1,2,5,4,8,1,5];
    var women=[45,55,45];
    var children=[256,365];
    document.getElementById("checkbox1").onchange=function(){
        for(i=0; i<men.length; i++){
            document.getElementById("userlist").innerHTML+= "<li>" + men[i] + "</li>";
            document.getElementById("checkbox1").onchange='';
        }
    }
    document.getElementById("checkbox2").onchange=function(){
        for(i=0; i<women.length; i++){
            document.getElementById("userlist").innerHTML+= "<li>" + women[i] + "</li>";
            document.getElementById("checkbox2").onchange='';
        }
    }
    document.getElementById("checkbox3").onchange=function(){
        document.getElementById("checkbox3").onchange='';
        for(i=0; i<children.length; i++){
            document.getElementById("userlist").innerHTML+= "<li>" + children[i] + "</li>";
           
           
        } 
    }

 <label for="checkbox1">men</label>
   <input type="checkbox" id="checkbox1">
   <label for="checkbox2">women</label>
   <input type="checkbox" id="checkbox2">
   <label for="checkbox3">children</label>
   <input type="checkbox" id ="checkbox3">
   <ul id="userlist">

   </ul>

Eddie · Accepted Answer · 2018-03-17 11:58:13Z

One option is to add all <li> on load and just hide/show on checkbox click.

var men = [1, 2, 5, 4, 8, 1, 5];
var women = [45, 55, 45];
var children = [256, 365];

//Adding all the elements with style display:none
for (i = 0; i < men.length; i++) {
  document.getElementById("userlist").innerHTML += "<li class='li-men' style='display:none'>" + men[i] + "</li>";
}

for (i = 0; i < women.length; i++) {
  document.getElementById("userlist").innerHTML += "<li class='li-women' style='display:none'>" + women[i] + "</li>";
}

for (i = 0; i < children.length; i++) {
  document.getElementById("userlist").innerHTML += "<li class='li-children' style='display:none'>" + children[i] + "</li>";
}


document.getElementById("checkbox1").onchange = function() {
  var li = document.getElementsByClassName('li-men');
  for (var i = 0; i < li.length; i++) {
    if (document.getElementById('checkbox1').checked) {
      li[i].style.display = '';
    } else {
      li[i].style.display = 'none';
    }
  }
}

document.getElementById("checkbox2").onchange = function() {
  var li = document.getElementsByClassName('li-women');
  for (var i = 0; i < li.length; i++) {
    if (document.getElementById('checkbox2').checked) {
      li[i].style.display = '';
    } else {
      li[i].style.display = 'none';
    }
  }
}
document.getElementById("checkbox3").onchange = function() {
  var li = document.getElementsByClassName('li-children');
  for (var i = 0; i < li.length; i++) {
    if (document.getElementById('checkbox3').checked) {
      li[i].style.display = '';
    } else {
      li[i].style.display = 'none';
    }
  }
}

<label for="checkbox1">men</label>
<input type="checkbox" id="checkbox1">
<label for="checkbox2">women</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox3">children</label>
<input type="checkbox" id="checkbox3">
<ul id="userlist">

</ul>

Muhammad Omer Aslam · Accepted Answer · 2018-03-17 11:47:56Z

Because you are removing onchange event from the element once shown all li's and not hiding them instead, see the update below

var men = [1, 2, 5, 4, 8, 1, 5];
var women = [45, 55, 45];
var children = [256, 365];
document.getElementById("checkbox1").onchange = function() {
  if (this.checked) {
    for (i = 0; i < men.length; i++) {
      document.getElementById("userlist").innerHTML += "<li>" + men[i] + "</li>";
      //document.getElementById("checkbox1").onchange='';
    }
  } else {
    document.getElementById("userlist").innerHTML = '';
  }
}
document.getElementById("checkbox2").onchange = function() {
  if (this.checked) {
    for (i = 0; i < women.length; i++) {
      document.getElementById("userlist").innerHTML += "<li>" + women[i] + "</li>";
      //document.getElementById("checkbox2").onchange='';
    }
  } else {
    document.getElementById("userlist").innerHTML = '';
  }
}
document.getElementById("checkbox3").onchange = function() {
  if (this.checked) {
    for (i = 0; i < children.length; i++) {
      document.getElementById("userlist").innerHTML += "<li>" + children[i] + "</li>";

    }
  } else {
    document.getElementById("userlist").innerHTML = '';
  }
}

<label for="checkbox1">men</label>
<input type="checkbox" id="checkbox1">
<label for="checkbox2">women</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox3">children</label>
<input type="checkbox" id="checkbox3">
<ul id="userlist">

</ul>

Ankit Agarwal · Accepted Answer · 2018-03-17 12:00:46Z

You can minimise and make your code generic in addition to showing and hiding the array values. You can associate a onclick function to each checkbox and pass parameters to those function like type which specifies the array that should be shown and checkbox reference so that you can manipulate this checkbox in javascript code:

var men=[1,2,5,4,8,1,5];
var women=[45,55,45];
var children=[256,365];
function clickCb(type, cbElem){
  var targetArray;
  if(type === 'men'){
    targetArray = men;
  }
  if(type === 'women'){
    targetArray = women;
  }
  if(type === 'children'){
    targetArray = children;
  }
  if (cbElem.checked) {
    for (i = 0; i < targetArray.length; i++) {
      document.getElementById("userlist").innerHTML += "<li>" + targetArray[i] + "</li>";
    }
  } else {
    document.getElementById("userlist").innerHTML = '';
  }
}

<label for="checkbox1">men</label>
<input type="checkbox" id="checkbox1" onclick = clickCb('men',this)>
<label for="checkbox2">women</label>
<input type="checkbox" id="checkbox2" onclick = clickCb('women',this)>
<label for="checkbox3">children</label>
<input type="checkbox" id ="checkbox3" onclick = clickCb('children',this)>
<ul id="userlist">

</ul>

Collectives™ on Stack Overflow

using javascript i am displaying check boxes with some lists

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related