Событие щелчка флажка не работает в строке данных, когда кнопки: ['colvis'] активны - PullRequest
Новая
       0

Событие щелчка флажка не работает в строке данных, когда кнопки: ['colvis'] активны

1 голос
/ 09 января 2020

У меня есть 1 вопрос здесь: Как получить значение флажка в 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);
})

1 Ответ

3 голосов
/ 09 января 2020

В этом случае вам может потребоваться обновить событие onchange для флажка #checkedAll.

Поскольку вы хотите использовать его с 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>
...