jquery - 使用 jQuery 选中和取消选中表 tr 的复选框

Question

当单击表行 (tr) 时，我尝试选中该复选框。并获取复选框的数据值并在表格中显示为选定的总金额，在显示选定的总金额之前，有一个条件检查是否

if( (selected_amount + selected_total_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>

Answer 1

由于您的复选框点击事件干扰了 tr 的点击事件，因此最好稍微修改您的逻辑。

首先将所有 tr 的类更改为 checkable ，这样你就可以说“这些元素可以被检查或切换”

<tr class="checkable">

然后更改您的点击事件，使其仅在这些 tr 上触发

$(document).on('click', 'tr.checkable', function(){ ...

现在您可以更改条件 block 以首先检查 checked 是否存在单击 tr 上的类并运行正确的代码，同时添加/删除 checked根据需要上课。

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 .