对于循环奇怪的输出

Question

所以，我试图创建一个JavaScript事件，输出将列表中的每行单击后，数组中的每一行。我想出了这个代码：

var lista = []; 
$("#lista li").click(function(){ 
    for (i = 0; i < $("#lista li").length; i++) { 
    if($("#lista li input")[i].checked) { 
     lista.push($('#lista li')[i].innerText); 
     console.log(lista); 
    } else { 
     lista.splice(lista.indexOf($('#lista li')[i].innerText), 1) 
    } 
    } 
}) 

但它为阵 什么是错的输出重复值？

编辑：一旦他们加入到指定的数组

<ul id="lista" class="drilldown" style="width: 100%"> 
       <li><input id="hemograma" type="checkbox" value="hemograma" style="margin-bottom: 0px;"><label for="hemograma" id="e0">Hemograma</label></li> 
       <li><input id="glicemia" type="checkbox" value="glicemia" style="margin-bottom: 0px;"><label for="glicemia" id="e1">Glicemia de jejum</label></li> 
       <li><input id="ctotal" type="checkbox" value="colesterol" style="margin-bottom: 0px;"><label for="ctotal" id="e2">Colesterol total</label></li> 
       <li><input id="hdl" type="checkbox" style="margin-bottom: 0px;"><label for="hdl" id="e3">HDL</label></li> 
       <li><input id="trig" type="checkbox" style="margin-bottom: 0px;"><label for="trig" id="e4">Triglicérides</label></li> 
       <li><input id="TSH" type="checkbox" style="margin-bottom: 0px;"><label for="TSH" id="e5">TSH</label></li> 
       </ul> 

Answer 1

您有权访问JQuery核心，为什么不使用它？ https://jsfiddle.net/googabeast/udazr5vp/

<ul id="lista" class="drilldown" style="width: 100%"> 
    <li><input id="hemograma" type="checkbox" value="hemograma" style="margin-bottom: 0px;"><label for="hemograma" id="e0">Hemograma</label></li> 
    <li><input id="glicemia" type="checkbox" value="glicemia" style="margin-bottom: 0px;"><label for="glicemia" id="e1">Glicemia de jejum</label></li> 
    <li><input id="ctotal" type="checkbox" value="colesterol" style="margin-bottom: 0px;"><label for="ctotal" id="e2">Colesterol total</label></li> 
    <li><input id="hdl" type="checkbox" style="margin-bottom: 0px;"><label for="hdl" id="e3">HDL</label></li> 
    <li><input id="trig" type="checkbox" style="margin-bottom: 0px;"><label for="trig" id="e4">Triglicérides</label></li> 
    <li><input id="TSH" type="checkbox" style="margin-bottom: 0px;"><label for="TSH" id="e5">TSH</label></li> 
</ul> 

<div class="result"></div> 




var lista = []; 
$("#lista li input[type='checkbox']").click(function(){ 
    var text = $(this).parent().text().trim(); 

    if($(this).is(":checked")){ 
     lista.push(text) 
    }else{ 
     lista.splice(lista.indexOf(text), 1) 
    }; 

    $(".result").text(lista.toString()) 
}); 

Answer 2

var lista = []; 
$("#lista li").click(function(){ 
    for (i = 0; i < $("#lista li").length; i++) { 
     if($("#lista li input")[i].checked) { 
      lista.push($('#lista li')[i].innerText); 
     } else { 
      lista.splice(lista.indexOf($('#lista li')[i].innerText), 1) 
     } 
    } 
    console.log(lista); 
}) 

这将输出的所有元素。

注意：记住，console.log是外循环

编辑：把点击事件里面的日志功能。