我正在使用DataTables,并尝试实现自己的“检查/全选”输入。我的那部分工作正常,但是现在我试图在所有表行都具有“ selected”类时将“ check / select all”输入输入到“ prop(“ checked”),true”(这就是DataTables Select插件的工作方式) )。问题在于,这意味着所有行在第一次单击时都具有“选择的”类,这是不正确的。我不明白我在做什么错。 :(
<table id="table-general>
<thead>
<tr>
<th>
<input name="selectAll" type="checkbox" id="selectAll1" class="select-all">
<label for="selectAll1"></label>
</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="select-checkbox"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="selected">
<td class="select-checkbox"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="select-checkbox"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="select-checkbox"></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
$(function() {
// DataTable for General
let DT1 = $('#table-general').DataTable({
"scrollY": 100,
"scrollX": true,
"scrollCollapse": true,
"fixedHeader": true,
"bInfo" : false,
scrollResize: true,
lengthChange: false,
searching: false,
paging: false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
columnDefs: [ {
className: 'select-checkbox',
targets: 0
}, {
orderable: false,
targets: [0,7]
} ],
select: {
style: 'multi+shift',
selector: 'td.cell-input'
},
order: [[ 1, 'asc' ]]
});
$("#selectAll1").on( "click", function(e) {
if ($(this).is( ":checked" )) {
DT1.rows( ).select();
$(this).prop("checked", true);
} else {
DT1.rows( ).deselect();
$(this).prop("checked", false);
}
});
$(".select-checkbox").on( "click", function(e) {
if($(this).parent().hasClass("selected")) {
$(".select-all").prop("checked", false);
}
else if ($(this).parent('tr').length === $(this).parent('tr.selected').length) {
alert("TEST, ALL SAME CLASS SELECTED");
$(".select-all").prop("checked", true);
}
});
});