单击selectAll复选框后，“选择/取消选择”复选框不起作用

Question

我有一个jQuery数据。它的一列由复选框组成，您可以在这里看到。现在，当我单击行上的复选框时，它们工作正常。我的意思是，它打印出单个选择类复选框中的一个被选中，或者单个选择类复选框中的一个被取消选中，因为我在事件处理程序中添加了这些。但是，如果我单击全部选择一次，我的单个复选框将不再运行（它不会打印这些消息）。选择所有复选框，看起来工作正常。（选择所有单独的框）。这是我的全选和单选复选框相关代码：

选择所有处理程序：

$('input[type="checkbox"][id="selectAll"]').click(function () {
    if ($(this).prop("checked") == true) {
        converter.checkAll(true);

    } else if ($(this).prop("checked") == false) {
        converter.checkAll(false);
    }
});

检查所有功能

Converter.prototype.checkAll = function (checktoggle) {
    var data = (this.resultTable).fnGetData();
    for (var i in data) {
        var row = $('<div>' + data[i][3] + '</div> ');

        row.children('input').attr('checked', (checktoggle) ? 'checked' : false);
        row.children('input').attr('id', 'singleSelect');
        console.log(row.html());

        (this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
    }
    (this.resultTable).fnDraw();
}

单选择处理程序

$('input[type="checkbox"][id="singleSelect"]').click(function () {

    alert("asdasdasdasd");
    if ($(this).prop("checked") == true) {
        alert('one of the single select class checkbox is checked');
    } else if ($(this).prop("checked") == false) {

        alert('one of the single select class checkbox is unchecked');
    }
});

Answer 1

我们可以通过使用子行的复选框名称来选中/取消选中jquerydatatable。

<script type="text/javascript">
    $(function () {
        $("#chkAll").click(function () {
            $("input[name='employees']").attr("checked", this.checked);
        });
        $('#example').DataTable({
        });
    });
</script>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th align="left"><input type="checkbox" id="chkAll" /></th>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="employees" /></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="employees" /></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>

                <td>$170,750</td>
            </tr>
          </tbody>
    </table>

它适用于更多细节http://www.infinetsoft.com/Post/How-to-check-all-rows-in-jQuery-datatables-grid/1255

Answer 2

问题似乎是

$（'input[type=“checkbox”][id=“selectAll”]'）。单击（函数（）{

使用选择器[id=“selectAll”]在输入时调用jsat post不会取消选中所有复选框，而是创建新的input元素，其中checked属性通过参数checktoggle

那么我应该怎么做才能解决这个问题呢？

如果问题中未包含html，则很难确认。尝试利用。each（），设置此。在回调中选中至真，假

$('input[type="checkbox"][id="selectAll"]').click(function (e) {
  $("input[type=checkbox]").each(function() {
    if ($(e.target).prop("checked") == true) {
        this.checked = true;
        converter.checkAll(true);

    } else  {
        this.checked = false;
        converter.checkAll(false);
    }
  })
});

Answer 3

使用此模式

选择所有处理程序：

// note change event
$('input[type="checkbox"][id="selectAll"]').change(function () {
        converter.checkAll($(this).prop("checked"));
});

检查所有功能

Converter.prototype.checkAll = function (checktoggle) {
    var data = (this.resultTable).fnGetData();
    for (var i in data) {
        var row = $('<div>' + data[i][3] + '</div> ');

        row.children('input').prop('checked', checktoggle) ;
        row.children('input').attr('id', 'singleSelect');
        console.log(row.html());

        (this.resultTable).fnUpdate(row.html(), parseInt(i, 10), 3, false, false);
    }
    (this.resultTable).fnDraw();
}

单选择处理程序

$('input[type="checkbox"][id="singleSelect"]').change(function () {

    alert("asdasdasdasd");
    if ($(this).prop("checked") == true) {
        alert('one of the single select class checkbox is checked');
    } else if ($(this).prop("checked") == false) {

        alert('one of the single select class checkbox is unchecked');
    }
});