jquery Checkbox get Wert Texteingabe

Question

Ich habe Liste Eingang Checkbox

<input type="checkbox" name="id_image" value="homies_01" class="id_image" /> 
 
<input type="checkbox" name="id_image" value="homies_02" class="id_image" /> 
 
<input type="checkbox" name="id_image" value="homies_03" class="id_image" /> 
 

 
<input type="text" name="id_image" value="" class="id_image_check" />

Wie checkbox mehrere Eingabe überprüfen i zeigen Wert müssen input type="text" als

<form> 
 
<input type="text" name="id_image" value="homies_01, homies_02, homies_03" class="id_image_check" /> 
 
</form>

Answer 1

Es gibt eine perfecly Lösung mit Vanilla Javascript

function attachListeners() { 
    var checkboxes = document.getElementsByClassName('id_image') 

    for (var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].addEventListener('click', getAndPutValues, false); 
    } 
} 

function getAndPutValues() { 
    var result = []; 
    document.querySelectorAll(".id_image:checked").forEach(function(item) { result.push(item.value);}); 

    document.querySelector('.id_image_check').value = result.join(', '); 
} 

attachListeners(); 

Answer 2

Mit jquery

$(".id_image").on("click",function(){ 
    $(".id_image_check").val(
    $(".id_image :checked").map((i,el) => el.value).join(", ") 
) 
}); 

Answer 3

Verwenden Sie einfach eckige Klammern [] am Ende des Namens, wenn Sie es mit dem Formular oder verwenden Sie die folgende Methode in jQuery zu erhalten Werte von mehreren ausgewählten Kontrollkästchen einreichen möchten.

$('#show').click(function(){ 
 
    values = ""; 
 
    $('input.id_image:checked').each(function(){ 
 
    values += $(this).val() + " "; 
 
    }); 
 
    if(values){ 
 
    $('#values').html(values); 
 
    }else{ 
 
    $('#values').html("None"); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="id_image[]" value="homies_01" class="id_image" /> Homies 1 
 
<input type="checkbox" name="id_image[]" value="homies_02" class="id_image" /> Homies 2 
 
<input type="checkbox" name="id_image[]" value="homies_03" class="id_image" /> Homies 3 
 

 
<br> 
 
<button id="show">Show</button> 
 

 
<br> 
 
<div id="values"></div>

Answer 4

Zunächst einmal sollten Sie Array-Notation für Checkbox Namen

<input type="checkbox" name="id_image[]" value="homies_01" class="id_image" /> 
<input type="checkbox" name="id_image[]" value="homies_02" class="id_image" /> 
<input type="checkbox" name="id_image[]" value="homies_03" class="id_image" /> 

Es Sie gleichzeitig mehrere Werte schreiben helfen verwenden

Danach für Werte bei der Prüfung jQuery können Sie

verwenden

<script type="text/javascript"> 
    $('[name="id_image[]"]').click(function(){ 
     var value = ''; 
     $('[name="id_image[]"]:checked').each(function(){ 
      value += $(this).val(); 
     }); 

     $('#id_image_check').val(value); 
    }); 
</script> 

Answer 5

Try this:

<input type="checkbox" name="id_image" value="homies_01" class="id_image" onchange="toggleCheckbox(this)" /> 
<input type="checkbox" name="id_image" value="homies_02" class="id_image" onchange="toggleCheckbox(this)" /> 
<input type="checkbox" name="id_image" value="homies_03" class="id_image" onchange="toggleCheckbox(this)" /> 

<input type="text" name="id_image" id="id_image" value="" class="id_image_check" /> 

<script type="text/javascript"> 
    var arrImages = []; 
    function toggleCheckbox(element) { 
     console.log('element', element.value); 

     arrImages.push(element.value); 
     document.getElementById("id_image").value = arrImages; 
    } 
</script>