单击selectAll复选框后，“选择/取消选择”复选框无效

Select/Deselect checkbox does not work after selectAll checkbox clicked

本文关键字：选择 复选框 取消 无效 selectAll 单击      更新时间：2023-09-26

我有一个jquery数据表。如图所示，其中一列由复选框组成。现在，当我单击行上的复选框时，它们会正常工作。我的意思是它打印出单个选择类复选框中的一个被选中或单个选择类复选框中的一个未选中，因为我在事件处理程序中添加了这些。但是，如果我单击一次全部选择，我的单个复选框将不再运行(它不会打印出这些消息)。选择所有看起来正常的复选框。(选择所有单独的框)。下面是我的全选和单选复选框的相关代码:

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);
    }
});
<<p> checkAll函数/strong> 
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();
}

Single Select Handler

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

使用此模式

SelectAll handler: 

// note change event
$('input[type="checkbox"][id="selectAll"]').change(function () {
        converter.checkAll($(this).prop("checked"));
});
<<p> checkAll函数/strong> 
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();
}

Single Select Handler

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

问题似乎是

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

在input上调用

，选择器为[id="selectAll"];js at post不取消所有复选框，但创建新的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);
    }
  })
});

我们可以通过使用子行的复选框名来设置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

相关文章：