Anzeige mehrerer Kontrollkästchen Werte in Tabelle

Question

Ich arbeite an einem Projekt, wo ich Kontrollkästchen und seine Werte in einer Tabelle anzeigen muss. Das bedeutet, dass in einer Spalte Checkbox s sein wird und und nächste Spalte muss ich seinen Wert anzeigen. Ich bin sehr neu zu jquery, also versuchte ich, aber nicht richtige Ausgabe.

$('input[type=checkbox]').on('change', function() { 
 
    if ($(this).is(':checked')) { 
 
    var values = []; 
 
    $.each($('input:checked'), function(index, input) { 
 
     values.push(input.value); 
 
    }); 
 

 
    var str = values.join(','); 
 
    $(".hello").html(str); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>checkboxes</th> 
 
    <th>Values</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name='cbox' value="red" class="theClass" />red 
 
    </td> 
 
    <td class="hello"></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name='cbox' value="green" class="theClass" />green 
 
    </td> 
 
    <td class="hello"></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name='cbox' value="blue" class="theClass" />blue 
 
     <p></p> 
 
    </td> 
 
    <td class="hello"></td> 
 
    </tr> 
 

 
</table> 
 

 
<table>

Answer 1

Sie richten den Wert auf alle Tabellenzellen, die die Klasse hello haben. Sie sollten stattdessen nur neben dem Kontrollkästchen auswählen. Sie können dies durch navigating to the parent cell und dann die next cell tun.

Eine Möglichkeit, dies zu tun wäre $(this).parent().next(".hello")

sein z.B.

$('input[type=checkbox]').on('change', function() { 
 
    var val = this.checked ? this.value : ""; 
 
    $(this).parent().next(".hello").text(val); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>checkboxes</th> 
 
    <th>Values</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name='cbox' value="red" class="theClass" />red 
 
    </td> 
 
    <td class="hello"></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name='cbox' value="green" class="theClass" />green 
 
    </td> 
 
    <td class="hello"></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" name='cbox' value="blue" class="theClass" />blue 
 
     <p></p> 
 
    </td> 
 
    <td class="hello"></td> 
 
    </tr> 
 

 
</table> 
 

 
<table>