當按鈕：['colvis'] 激活時，復選框單擊事件在數據表行中不起作用

Question

我在這里有 1 個問題： How to get a Checkbox Value in JavaScript 。

• 在幫助下，它工作得很好。 但是，當我將按鈕：['colvis'] 添加到 DataTable 時，單擊復選框事件似乎無法正常工作。 我在 DataTable 論壇上尋求幫助，但無濟於事。

代碼：

<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);
})

Answer 1

在這種情況下，您可能需要更新復選框#checkedAll onchange事件。

由於您想將它與 jquery 一起使用，您可以從中刪除屬性onclick="toggle(this)"

<input type="checkbox" onclick="toggle(this)" name="checkedAll" id="checkedAll" />

然后，在您的 js 文件中，您可以像這樣編寫事件

$('#checkedAll').on('change', toggle);

然后，因為我們使用的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>