我有一个表格，其中有 2 tr 。里面有 td 在第一个 td .有服务名称。当我选中一行的复选框时，我希望输入中的第一个 td 文本，但是当我选择第二个复选框时，我希望该输入中的第二个 tr td 第一个值，如果我想插入两个 tr td 第一个值，我正在插入它，但是当我取消选中复选框时，两个 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>
$(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/