javascript - 输入以下结果(Result below input)

Question

how best can I put the result of each checkbox under the text?

(如何最好地将每个复选框的结果放在文本下方？)

Selecting the CheckBox displays the result that is in value , this result appears on the right side, as it would appear below?

(选择CheckBox将显示value的结果，该结果显示在右侧，就像下面显示的那样？)

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

 body { padding: 15px; } .hello { width:380px; font: 11px Arial, sans-serif; color: green; padding-left:10px; } 

 <script src="https://cdnjs.cloudflare.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='cbox2' value="green" class="theClass" />green </td> <td class="hello"></td> </tr> <tr> <td> <input type="checkbox" name='cbox3' value="blue" class="theClass" />blue <p></p> </td> <td class="hello"></td> </tr> </table> 

  ask by Atila Oliveira translate from so

Answer 1

I think you don't need the second column, just one column, so the response appears Under the checkbox text.

(我认为您不需要第二列，只需要一列，因此响应显示在复选框文本下方。)

So you can style as you want...

(这样您就可以根据需要设置样式...)

 $('input[type=checkbox]').on('change', function() { var val = this.checked ? "<br> &nbsp;&nbsp;&nbsp;&nbsp;" + this.value : ""; $(this).next(".hello2").html(val); }); 

 body { padding: 15px; } .hello2 { width:380px; font: 11px Arial, sans-serif; color: green; padding-left:10px; } 

 <script src="https://cdnjs.cloudflare.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='cbox1' value="red" class="theClass" />red<span class="hello2"></span> </td> </tr> <tr> <td> <input type="checkbox" name='cbox2' value="green" class="theClass" />green<span class="hello2"></span> </td> </tr> <tr> <td> <input type="checkbox" name='cbox3' value="blue" class="theClass" />blue<span class="hello2"></span> </td> </tr> </table>