Javascript 我想要选中复选框的同一行的数据。我的表行在循环中

我想要同一行的数据，我将单击该行的复选框。我的表行在循环中 我想在最后显示总价，但它显示了所有的箱子。 我在视图中按名称获取值，但这里我的表单组件在for循环中，所以如果数据不在那里，它就不应该出现

这是我的index.html：

    {% for j in package %}
        <tr class="valid-container">
            <td style="cursor:pointer;">
               <input type="checkbox" name="c1" >&nbsp; {{ j.visa_type }}
            </td>

           <td height="52">
                <select class="custom-select processing_type" name="processing_type" data-id="{{ j.id }}" required>
                    <option value="{{ j.price }}" selected>Normal</option>
                    <option value="{{ j.express_price }}">Express</option>
                </select>
           </td>

          <td height="52">
            <select class="custom-select no_of_person" name="no_of_person" data-id="{{ j.id }}" required>
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>

         </td>

         <td width="190" height="60">
            <div class="input-group date" data-date-format="dd.mm.yyyy">
                <div class="input-group mb-2">
                    <input  type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
                        <div class="input-group-text"><i class="ti-calendar"></i></div>
                            <div class="input-group-addon">
                            </div>
                                <div class="input-group-prepend">
                                </div>
                </div>
            </div>

        </td>
        <td>{{ j.currency_type }}&nbsp;&nbsp; <output name="result" class="package_price">{{ j.price }}</output>.00</td>

                                </tr>
                    {% endfor %}

$('.valid-container').ready(function() {

var date = $(this).find('#date').attr('required',true);

  $('select').on('change', function() {
    var id = $(this).data("id");
    var total = $('select[name=processing_type]').val() * $('select[name=no_of_person]').val();
    var price = $(this).find('.package_price').text();

  });

});

您可以使用

$（this）.recest（“tr”）

获取最接近的tr，然后只需使用

.find（）

从selects获取所需的值，然后使用

.text（）

将总值添加到

套餐价格中

演示代码（带有虚拟值）：


//更改选择或复选框时
$（'select，input[type=checkbox]'）。在（'change'，function（）上{
var选择器=$（this.nexist（“tr”）//获取最近的tr
//如果选中复选框
if（selector.find（“input[type=checkbox]”）是（“：checked”））{
//获取选择值
var prcs_type=selector.find（“select[name=processing_type]”）.val（）；
var no_person=selector.find（“select[name=no_of_person]”）.val（）；
var总计=prcs_类型*无人员；
selector.find（“.package\u price”）.text（total）//为package\u prcie添加值。
}
});

1.
正常的
快车
1.
2.
3.
4.
5.
6.
7.
8.
9
10
{{j.currency_type}{{j.price}}.00
2.
正常的
快车
1.
2.
3.
4.
5.
6.
7.
8.
9
10
{{j.currency_type}{{j.price}}.00
您不应该在循环html模板中使用静态
id
，因为
id
不再是唯一的，这可能会/确实会弄乱选择器。您好，代码中的
package\u price
在哪里？也，您需要在上一个
td
中计算该总数的位置？好的，我将删除它，但如果您有解决方案，请告诉我，因为我从昨天起就被困在其中。哦，对不起，我必须编辑问题wait@swati看，我在最后添加了包_价格类有问题的td请帮助我把你@swati的工作。事实上，我必须变成这样，但它会如果你给出任何与之相关的解决方案，它也会更好。谢谢你的时间，你能指出区别吗？在上面的代码中你不想要什么？不，一切都很好，只要你点击复选框，没有它，只有值发生变化。我想上这个网站raynatours.com/dubai-visa.aspx但是你发给我的这个代码，我对此非常满意，我从昨天就开始尝试了，但是我没有得到正确的值。非常感谢。