当我点击表格行（tr）时，我试图勾选复选框。并获取复选框的数据值并在表格中显示所选总金额，在显示所选总金额之前，有条件检查是否
if（（selected_amount + selected_total_amount）＆lt; = Amount）
然后只有 selected_amount 添加 selected_total_amount
如果我们点击 tr ，这个条件工作正常，但是当我点击复选框时，该功能会触发两次。
如何解决这个问题？
https://jsfiddle.net/vtuqyk8o/1/
<table class="table chqSummryTB" style="margin-top:10px"; border="1">
<thead>
<tr>
<th colspan="3"></th>
<th colspan="2" style="text-align:right;">
Amount </br>
<input type="text" id="partyTotAmount" readonly="readonly"
value="5000.00"
style="border:0px ;text-align:right; font-size:15px" />
<input type="hidden" id="paySum" />
</th>
<th style="text-align:right;">
No of cheques </br>
<input type="text" name="totChqRow2" id="totChqRow" readonly="readonly" value="0"
style="width:100%; border:0px ;text-align:right; font-size:15px" />
</th>
<th style="text-align:right;width:15%">
Selected Total Amount</br>
<input type="text" id="SelcTotAmount" readonly="readonly" value="0.00"
style="border:1px; width:100%; text-align:right; font-size:15px" />
</th>
</tr>
<tr style="background: brown;color: #fff;">
<th>No </th>
<th>Cheque No</th>
<th>Customer Name</th>
<th>Ref No</th>
<th>Type</th>
<th>Amount</th>
<th>Date</th>
</tr>
</thead>
<tbody style="overflow:scroll; height:500px;">
<tr class="checked">
<td width="3%" class="checkBxTD">
<input type="checkbox" class="checked" data-value="2500"
value="2015-10-22||2000047083002||2500||Own||735||140-1562-100||31" name="ChqID[]" />
</td>
<td class="checkBxTD">2000047083002</td>
<td class="checkBxTD">Cus 1</td>
<td class="checkBxTD">3</td class="checkBxTD">
<td class="checkBxTD">Own</td class="checkBxTD">
<td style="text-align:right;" class="checkBxTD">2,500.00</td>
<td class="checkBxTD">2015-10-22</td>
</tr>
<tr class="checked">
<td width="3%" class="checkBxTD">
<input type="checkbox" class="checked" data-value="2500"
value="2015-10-22||1000587010002||2500||Party||735||040-100-7560||32" name="ChqID[]" />
</td>
<td class="checkBxTD">1000587010002</td>
<td class="checkBxTD">Cus 1</td>
<td class="checkBxTD">3</td class="checkBxTD">
<td class="checkBxTD">Party</td class="checkBxTD">
<td style="text-align:right;" class="checkBxTD">2,500.00</td>
<td class="checkBxTD">2015-10-22</td>
</tr>
<tr class="checked">
<td width="3%" class="checkBxTD">
<input type="checkbox" class="checked" data-value="100"
value="2015-10-24||1000707010002||100||Own||605||140-1562-100||33" name="ChqID[]" />
</td>
<td class="checkBxTD">1000707010002</td>
<td class="checkBxTD">Cus 2</td>
<td class="checkBxTD">5</td class="checkBxTD">
<td class="checkBxTD">Own</td class="checkBxTD">
<td style="text-align:right;" class="checkBxTD">100.00</td>
<td class="checkBxTD">2015-10-24</td>
</tr>
<tr class="checked">
<td width="3%" class="checkBxTD">
<input type="checkbox" class="checked" data-value="500"
value="2015-11-07||1000017010002||500||Own||678||78100||36" name="ChqID[]" />
</td>
<td class="checkBxTD">1000017010002</td>
<td class="checkBxTD">Cus 3</td>
<td class="checkBxTD">11</td class="checkBxTD">
<td class="checkBxTD">Own</td class="checkBxTD">
<td style="text-align:right;" class="checkBxTD">500.00</td>
<td class="checkBxTD">2015-11-07</td>
</tr>
</tbody>
</table>
<script>
$(document).on('click', '.checked', function(){
var count = 0;var sum = 0;
//alert( $(this).closest('tr').find("input[type=checkbox]").prop('checked') );
if($(this).closest('tr').find("input[type=checkbox]").prop('checked')){
$(this).closest('tr').find("input[type=checkbox]").prop('checked', false);
$(this).closest('tr').css('background-color','#FFF');
$(this).closest('tr').css('color','#000');
SelcTotAmount = parseFloat( $('#SelcTotAmount').val() );
var checkVal = parseFloat( $(this).closest('tr').find("input[type=checkbox]").data("value") );
$('#SelcTotAmount').val( SelcTotAmount - checkVal);
//alert(checkVal);
}else{
partyTotAmount = parseFloat( $('#partyTotAmount').val() );
var checkVal = parseFloat( $(this).closest('tr').find("input[type=checkbox]").data("value") );
var yetPaid = parseFloat( $('#SelcTotAmount').val() );
//console.log(checkVal +' === ' + yetPaid);
allPAid = checkVal + yetPaid;
if( allPAid > partyTotAmount){
alert('Maximum payable amount exceeds, if you select this cheque!');
}else{
$(this).closest('tr').find("input[type=checkbox]").prop('checked', true);
$(this).closest('tr').css('background-color','rgba(3, 60, 107, 0.99)');
$(this).closest('tr').css('color','#fff');
}
}
$('.hiddnClas').remove();
$(".checked:checked").each(function(){
count += 1;
sum += parseFloat( $(this).data('value') );
});
$('#paySum').val( parseFloat($('#partyTotAmount').val() - sum).toFixed(2) );
$('#SelcTotAmount').val(sum.toFixed(2));
$('#totChqRow').val(count);
$('#chqcount').val(count);
});
</script>
答案 0 :(得分：1)
由于您的复选框点击事件干扰了您的点击事件，因此最好稍微修改您的逻辑。
首先将您的所有课程更改为checkable，这样您就可以说＆＃34;可以检查或切换这些元素＆＃34;
<tr class="checkable">
然后更改您的点击事件，使其仅触发这些trs
$(document).on('click', 'tr.checkable', function(){ ...
现在，您可以更改条件块，首先检查单击的tr上是否存在checked类，并根据需要添加/删除checked类时运行正确的代码。< / p>
if($(this).closest('tr').find("input[type=checkbox]").prop('checked')){ ...
变为：
if($(this).hasClass('checked')){ ...
当您为两种状态应用样式时，可以使用$(this).removeClass('checked');或$(this).addClass('checked');切换选中的类。 （你可以使用$(this).toggleClass('checked');，但我更喜欢明确。
这里是updated fiddle。
答案 1 :(得分：0)
事件被触发两次的原因是您在复选框和checked上有tr个班级。您可能在复选框上不需要此课程。如果删除它，事件只会被触发一次。