Селектор Jquery для генерации итога, где отмечен флажок

Question

Я пытаюсь создать динамический генератор итогов, который добавляет значение к итогу, когда установлен соответствующий флажок в, но я борюсь с логикой селектора. Может кто-нибудь указать мне, где я иду не так, я новичок в JQuery. Вот что у меня есть

function calculateSelected(){
    var sum = 0;
    $('tr input:checked .price').each(function() {
            sum += parseFloat($(this).text());
        });
    $('#total').html(sum)
}

А это упрощенная версия таблицы

<table>
<tr>
<td><input type="checkbox" value='1' /><td>
<td class='price'>100</td>
</tr>
<tr>
<td><input type="checkbox" value='1' /><td>
<td class='price'>100</td>
</tr>
<tr>
<td><input type="checkbox" value='1' /><td>
<td class='price'>100</td>
</tr>
<tr>
<td><input type="checkbox" value='1' /><td>
<td class='price'>100</td>
</tr>
<tr>
<td>Total<td>
<td id='total'></td>
</tr>
</table>

Answer 1

Что это за выбор?

$('tr input:checked .price')

Каков дочерний элемент вашего ввода?Если вы хотите выбрать следующий тд с ценой класса, вы можете сделать:

$('tr input:checked').parent().next('td.price')

Answer 2

Так же, как и ответ Марка, вы можете использовать метод Siblings .

$('tr input:checked').parent().siblings('td.price')