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>

Answer 2

因为您要删除所有内容的\D+事件，而不是隐藏它们，请参阅下面的更新

＆＃13;

onchange

＆＃13;

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 = '';
  }
}

＆＃13;

Answer 3

除了显示和隐藏数组值之外，您还可以最小化并使代码具有通用性。您可以将onclick函数与每个复选框相关联，并将参数传递给那些函数，如type，它指定应显示的数组和复选框参考，以便您可以在javascript代码中操作此复选框：

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>

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

3 个答案: