Question

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

SelectAll handler：

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

// 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并未取消选中所有复选框，但会创建新的input元素，其中checked属性设置为参数checktoggle

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

如果问题中未包含html，则很难确认。尝试使用.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

selectAll复选框后，选中/取消选中复选框不起作用

3 个答案: