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>

Answer 1

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>

Answer 2

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>

Answer 3

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>