[英]Checkbox click event not working in datatable row when buttons: [ 'colvis' ] activeted
I have 1 question here: How to get a Checkbox Value in JavaScript .我在这里有 1 个问题: How to get a Checkbox Value in JavaScript 。
Code:代码:
<input id="listvalue" name="selectedCB">
<table id="datatest" class="table table-striped table-bordered nowrap" style="width:100%">
<thead>
<tr>
<th class="no-sort checkboxor">
<input type="checkbox" onclick="toggle(this)" name="checkedAll" id="checkedAll" /> #
</th>
<th class="no-sort">IDtest</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tycheck">
<input type="checkbox" name="checkAll" value="2" class="checkSingle" />
</td>
<td>1</td>
</tr>
<tr>
<td class="tycheck">
<input type="checkbox" name="checkAll" value="1" class="checkSingle" />
</td>
<td>2</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
$('#datatest').DataTable({
buttons: [
'colvis'
]
});
});
var idsArr = [];
var displayField = $('input[name=selectedCB]');
var checkboxes = Array.from($(".tycheck input[type=checkbox]"));
function toggle(source) {
var values = checkboxes.map(x => {
x.checked = source.checked;
return source.checked ? x.value : '';
}).join(source.checked ? ',' : '');
displayField.val(values);
}
function printChecked() {
var values = checkboxes.filter(x => x.checked).map(x => x.value);
displayField.val(values);
}
$.each(checkboxes, function () {
$(this).change(printChecked);
})
In this case, you may need to update the event onchange
for the checkbox #checkedAll
.在这种情况下,您可能需要更新复选框
#checkedAll
onchange
事件。
Since you want to use it with jquery, you can remove the attribute onclick="toggle(this)"
from由于您想将它与 jquery 一起使用,您可以从中删除属性
onclick="toggle(this)"
<input type="checkbox" onclick="toggle(this)" name="checkedAll" id="checkedAll" />
Then, in your js file, you can write the event like this然后,在您的 js 文件中,您可以像这样编写事件
$('#checkedAll').on('change', toggle);
Then, because we use toggle
function as the event for this checkbox, we don't need source
parameter anymore, just replace it with this
:然后,因为我们使用的
toggle
功能作为此复选框的情况下,我们并不需要source
参数了,只是将其替换为this
:
function toggle() {
var values = checkboxes.map(x => {
x.checked = this.checked;
return this.checked ? x.value : '';
}).join(this.checked ? ',' : '');
displayField.val(values);
}
$(document).ready(function () { $('#datatest').DataTable({ buttons: [ 'colvis' ] }); }); var idsArr = []; var displayField = $('input[name=selectedCB]'); var checkboxes = Array.from($(".tycheck input[type=checkbox]")); function toggle() { var values = checkboxes.map(x => { x.checked = this.checked; return this.checked ? x.value : ''; }).join(this.checked ? ',' : ''); displayField.val(values); } function printChecked() { var values = checkboxes.filter(x => x.checked).map(x => x.value); displayField.val(values); } $.each(checkboxes, function () { $(this).on('change', printChecked); }); $('#checkedAll').on('change', toggle);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <input id="listvalue" name="selectedCB"> <table id="datatest" class="table table-striped table-bordered nowrap" style="width:100%"> <thead> <tr> <th class="no-sort checkboxor"> <input type="checkbox" name="checkedAll" id="checkedAll" /> # </th> <th class="no-sort">IDtest</th> </tr> </thead> <tbody> <tr> <td class="tycheck"> <input type="checkbox" name="checkAll" value="2" class="checkSingle" /> </td> <td>1</td> </tr> <tr> <td class="tycheck"> <input type="checkbox" name="checkAll" value="1" class="checkSingle" /> </td> <td>2</td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.