Question

我有一张桌子，其中有2 tr。在它的内部第一个td中有td。有服务名称。当我选择一行的复选框时，则我希望输入中的第一个td文本，但是当我选择第二个复选框时，我想要该输入中的第二个tr td第一值，并且如果我想同时插入两个tr td first值我正在插入它，但是当我取消选中选中的复选框时，无论是td的第一个值还是在输入中删除，我都希望我取消选中一个复选框，然后它应该从输入中删除第一个tr td文本，而我又取消选中第二个复选框，则它滚动其tr td文本。这是我的代码，希望您理解

<!DOCTYPE html>
<html>
    <head>
        <title>table</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <table cellspacing="0" rules="all" border="1" id="table1" style="border-collapse:collapse;">
            <tbody>
                <tr>
                    <th scope="col">Service </th>
                    <th scope="col">Amount</th>
                    <th scope="col">tax</th>
                    <th scope="col">Action</th>
                </tr>
                <tr class='servicetr'>
                    <td class="service">
                        <span>Subscription Charges</span>
                    </td>
                    <td>
                        <span>500.00</span>
                    </td>
                    <td class="service">
                        <span >90.00</span>
                    </td>
                    <td>
                        <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00"  /> 
                    </td>
                </tr>
                <tr class='servicetr'>
                    <td>
                        <span>registration fees</span>
                    </td>
                    <td>
                        <span>200.00</span>
                    </td>
                    <td >
                        <span >80.00</span>
                    </td>
                    <td>
                        <input type="checkbox" data-toggle="checkbox" class="tot_amount" value="590.00"  /> 
                    </td>
                </tr>
            </tbody>
        </table>
        <br/>
        <input type="text" name="services" id="services" style="width:100%;">
        <script>
        $(document).ready(function(){
            $(document).on("change",".tot_amount",function(){  
                if (this.checked){  
                    var servicetext = $(this).closest("tr").find('td').eq(0).find('span').text();
                    var totalamt = $('#services').val();
                    if(totalamt != ''){
                        $('#services').val(totalamt + ", " + servicetext); 
                    } else {
                        $('#services').val(servicetext);
                    }
                }
                if(!this.checked) {
                    var servicetext = $(this).closest("tr").find('td').eq(0).find('span').text();
                    $('#services').val('');
                }
            });
        });
        </script>
    </body>
</html>

Answer 1

$(document).on("change",".tot_amount",function(){  
    var servicetext = [];
    $(this).closest('table').find('.servicetr').each(function(idx, elem) {
        if ($(elem).find('td:last input').is(':checked')) {
            servicetext.push($(elem).find('td:first span').text());
        }
    })

    $('#services').val(servicetext.join(', '));
});

工作示例：http://jsfiddle.net/2s5Lz3v6/

我的表TD跨度文本未在输入中添加和删除

1 个答案: