我无法弄清楚如何更正我的javascript以使其正常工作。我的目标是在表格页脚中添加一个值的总和，仅选取已检查的行。单行选择工作正常，但使用thead复选框将“checked”属性添加到显示的每一行，它不会触发操作。这是我的代码：
Javascript
//check all
$("#check-all").click(function () {
$(".data-check").prop('checked', $(this).prop('checked'));
});
$('#sumchecked').html('KG selezione: ');
$('#inventario', 'thead').on('change', 'input[type="checkbox"]', function(){
var totalSUM = 0;
$('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));
$('tr:has(:checked)').each(function () {
var getValue = parseFloat($(this).find("td:eq(3)").html().replace(",", "."));
totalSUM += getValue;
$('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));
});
});
HTML标记
<table id="inventario" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>N° Collo</th>
<th>Ordine</th>
<th>KG</th>
<th>Operatore</th>
<th><span style="font-size:1.5em;" title="Cimosa" class="icon-scissors-cutting-by-broken-line"></span></th>
<th><span style="font-size:1.5em;" title="Specola" class="icon-silk"></span></th>
<th>Falli</th>
<th>Note</th>
<th>Data Produzione</th>
<th>Stato</th>
<th>Consegna</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th><div id="sumchecked"></div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
Codeigniter中的Php控制器，用于生成表数据的ajax_list函数
public function ajax_list()
{
$list = $this->packing->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $pezza) {
$no++;
$row = array();
$row[] = '<input type="checkbox" class="data-check" value="'.$pezza->n_pezza.'">';
$row[] = $pezza->n_pezza;
$row[] = $pezza->ID_ordine;
$row[] = number_format($pezza->kg_pezza,3,",",".");
$row[] = $pezza->nome_operatore;
if($pezza->selvedge == '1'){
$row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
}else{
$row[] = '';
}
if($pezza->specola == '1'){
$row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
}else{
$row[] = '';
}
$row[] = $pezza->falli;
$row[] = $pezza->note;
$row[] = $this->conversione1($pezza->data);
if ($pezza->stato == '1'){
$row[] = '<span style="font-size:1.5em;" title="Consegnata"class="icon-logistics-delivery-truck-in-movement"></span>';
$row[] = $this->conversione2($pezza->data_consegna);
}else{
$row[] = '<span style="font-size:1.5em;" title="Magazzino" class="icon-warehouse"></span>';
$row[] = '';
}
$row[] = '<div class="btn-group btn-group-justified" style="width:136px">
<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Modifica" onclick="modifica_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-pencil"></i></a>
<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Info Filati" onclick="info_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-info-sign"></i></a>
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Cancella" onclick="cancella_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-trash"></i></a>
</div>';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->packing->count_all(),
"recordsFiltered" => $this->packing->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
如果我检查thead中的第一个复选框，这是我的输出 output sum checkboxes 建议？ 感谢所有需要一些时间阅读和解决问题的人。 安迪
答案 0 :(得分：0)
在服务器端#sumchecked生成HTML代码并将属性visibility: hidden添加到其中更容易。选择行时，不需要每次都浏览所有选定的行。要最小化DOM遍历，最好请求总和的当前值，然后向/从中添加/减去所选项的价格。要获取所有选定项目的总和，只需在#checked-prices-total-sum中插入#totalkg的值。
例如，我只使用价格列从HTML表中删除了3行并更改了脚本的代码：
$(document).ready(function() {
$("#check-all").click(function() {
var isChecked = $(this).prop('checked');
$(".data-check").prop('checked', isChecked);
var $sumchecked = $('#sumchecked');
var $totalSum = $('#checked-prices-total-sum');
if (isChecked) {
$totalSum.html($('#totalkg').html());
$sumchecked.css('visibility', 'visible');
} else {
$totalSum.html(0);
$sumchecked.css('visibility', 'hidden');
}
});
$('#inventario-data').on('change', 'input[type="checkbox"]', function(){
var $sumchecked = $('#sumchecked');
var $totalSum = $('#checked-prices-total-sum');
var totalSumValue = parseFloat($totalSum.html());
var price = parseFloat($(this).parent().next().next().html().replace(",", "."));
if ($(this).is(':checked')) {
totalSumValue += price;
} else {
totalSumValue -= price;
}
$totalSum.html(totalSumValue.toFixed(3));
totalSumValue > 0 ? $sumchecked.css('visibility', 'visible') : $sumchecked.css('visibility', 'hidden');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="inventario" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>N° Collo</th>
<th>Ordine</th>
</tr>
</thead>
<tbody id="inventario-data">
<tr>
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>10,200</td>
</tr>
<tr data-rowid="2">
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>30,400</td>
</tr>
<tr data-rowid="3">
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>50,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th><div id="sumchecked" style="visibility: hidden;">KG selezione: <span id="checked-prices-total-sum">0</span></div></th>
<th>Tot. KG <span id="totalkg">91,200</span></th>
</tr>
</tfoot>
</table>