javascript - 使用 javascript 我显示带有一些列表的复选框

Question

我正在使用复选框打印数组列表，情况是，如果我单击一个复选框，它会显示数组中的数字列表，所以我的问题是，如果我单击它显示的任何复选框，如果我取消选中列表仍然在展示？所以我想要代码，如果我取消选中我的列表应该显示，当我单击它时应该显示。

 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

一种选择是添加所有 <li>加载时只需隐藏/显示复选框单击即可。

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>