选中所有复选框后，选择/取消选择复选框不起作用

Question

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

SelectAll 处理程序：

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

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

checkAll 功能

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

使用此模式

SelectAll 处理程序：

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

checkAll 功能

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

Answer 2

问题似乎是

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

在 input 上调用，带有选择器 [id="selectAll"] ； js at post 不会取消选中所有复选框，而是创建新的 input 元素，其中 checked 属性设置为参数 checktoggle

---

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

如果没有 html 包含在 Question 中，很难确认。尝试使用 .each() ，将 this.checked 设置为 true ， false 在回调中

$('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

我们可以通过使用子行的复选框名称来检查/取消选中 jQuery 数据表。

<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