テーブルに複数のチェックボックスの値を表示

Question

私はチェックボックスとその値をテーブルに表示しなければならないプロジェクトに取り組んでいます。つまり、ある列のチェックボックスがそこにあり、次の列はその値を表示する必要があります。私はjqueryに非常に新しいので、私は試しましたが、適切な出力を得ていません。

$('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

あなたはにクラスhelloを持つすべてのテーブルセルの値を設定しています。代わりにのみをのチェックボックスの横に選択してください。 navigating to the parent cell、次にnext cellでこれを行うことができます。これを行うには

一つの方法は次のようになり$(this).parent().next(".hello")

例えば

$('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>