Get Checkbox Gesamtanzahl & Wert in Textfeld speichern, wenn aktiviert

Question

Ich habe unter Code geschrieben, um eine Gesamtanzahl von Checked Chechbox und speichern Sie den Wert überprüft Wert komma in Textbox getrennt.

HTML:

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount(this.value);'></label> 
<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount(this.value);'></label> 
<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount(this.value);'></label> 

<input type="text" name="proId" id="proId"> 

JS:

function checkCount(elm) { 
    var cheCount = $(":checkbox:checked").length; 
    document.getElementById('selectCount').innerHTML = cheCount; 

    definVal = document.getElementById('proId').value ; 
    var inval = elm+","+definVal; 
    document.getElementById('proId').value = inval; 

    if(cheCount==0){ 
    document.getElementById('proId').value = ""; 
    } 
} 

die Ausgabe im Bild unten überprüfen:

Mein Problem ist, dass, wenn ich die Checkbox deaktiviert, Sein Wert besteht darin, ein Textfeld anstelle von gettin hinzuzufügen g entfernen.

Answer 1

unten Änderungen vornehmen, nur js Methode aufrufen, nicht seinen Wert

schicken und dann von ihren Klassennamen

function checkCount(elm) { 
 
     var checkboxes = document.getElementsByClassName("checkbox-btn"); 
 
     var selected = []; 
 
     for (var i = 0; i < checkboxes.length; ++i) { 
 
     if(checkboxes[i].checked){ 
 
      selected.push(checkboxes[i].value); 
 
     } 
 
     } 
 
     document.getElementById("proId").value = selected.join(); 
 
     document.getElementById("total").innerHTML = selected.length; 
 
    }

<label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='1' onchange='checkCount();'></label> 
 
    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='2' onchange='checkCount();'></label> 
 
    <label class='checkbox-inline'><input type='checkbox' class='checkbox-btn' value='3' onchange='checkCount();'></label> 
 

 
    <input type="text" name="proId" id="proId"> 
 

 
<div>Total Selected : <span id="total">0</span></div>

überprüfen