JavaScript concat() -Methode fügt Zeilenumbruch nach dem Zufallsprinzip

Question

Ich schreibe einen JS-Code, der die Checkboxen in einem bestimmten liest, überprüft, ob sie ausgewählt sind, und wenn ja, hängt ihren Wert an eine Zeichenfolge an. Dies ist der Code, den ich habe:

var checkboxArr = document.querySelectorAll('#div_name input[type="checkbox"]'); 
    var str=""; 
    for(var i =0; i< checkboxArr.length;i++){ 
     var cb = checkboxArr[i]; 
     if(cb.checked){ 
      var newVal=cb.value; 
      str=str.concat(newVal); 
      str=str.concat(","); 
     } 
    } 
    alert(str); 

Die Zeichenfolge, die ich erhalte, ist:

value1 
,value2 
,value3 

Wie werden diese Zeilenumbrüche in der Zeichenfolge zu kommen?

Auch das Auftreten dieser Zeilenumbrüche ist zufällig - manchmal erscheinen sie, manchmal bekomme ich die gewünschte Zeichenfolge.

Ich habe auch versucht, die concat() Anrufe in 1 Anweisung zu kombinieren, und ich habe auch den Operator +=, aber kein Glück.

Jede Anleitung wird ernsthaft geschätzt. Danke

Answer 1

Das ist alles was Sie brauchen. Verwenden js rechts: D

var checkboxArr = document.querySelectorAll('#div_name input[type="checkbox"]'); 
var str = []; 

checkboxArr.forEach(function(cb) { 
    if (cb.checked) str.push(cb.value); 
});  

alert(str.join(', ')); 

und wenn Sie immer noch das gleiche Ergebnis überprüfen Sie Ihre html Code. Es scheint, wie Sie Linie Recht brechen nach dem Wert in Checkbox

Answer 2

Check-Implementierung mit ES6, nicht sicher, warum Sie new line bekommen,

var btn = document.getElementById('btn'); 
 

 
btn.onclick = function(){ 
 
var checkboxArr = document.querySelectorAll('#div_name input[type="checkbox"]:checked'); 
 
    var res = Array.from(checkboxArr).map(cb => cb.value.trim()).join(',') 
 
    console.log(res) 
 
}

<div id="div_name"> 
 
    <input type="checkbox" value="cb_1" />  
 
    <input type="checkbox" value="cb_2" />  
 
    <input type="checkbox" value="cb_3" />  
 
    <input type="checkbox" value="cb_4" />  
 
    <input type="checkbox" value="cb_5" />  
 
</div> 
 
<button id="btn">Check</button>