Question

如何检查作为AJAX请求的一部分返回的所有复选框？

我有一个显示电子邮件摘要的页面（想想gmail / yahoo / etc ...收件箱）。每个摘要都有一个与之关联的复选框，以便我的用户可以使用该消息执行任意数量的操作。列表的顶部和底部是“全部选中”选项。我知道如何将委托函数绑定到动态复选框，但我似乎无法找到任何方法让我的“全部检查”按钮能够操纵这些动态元素。例如：

//get the list of messages
$.ajax({
    type: "POST",
    url: "GetMessages.asmx/GetMessagePreview",
    data: "{'FolderID': '5'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
       //code here to create a checkbox row (checkbox, message title, etc...)
       var cbRow = '<input type="checkbox" class="msg_check" ...etc... />'
       //code here to insert to a div or other container   
}
 });

$("#selectAllButton").click( function(){
   ????? This is the blank I need filled in...
});

非常感谢任何帮助。谢谢。

Answer 1

应该很容易：

$("#selectAllButton").click( function(){
    if (this.checked)
        $('.msg_check').attr('checked', 'checked');
    else
        $('.msg_check').removeAttr('checked');
});

已编辑：如果您要以相同的条件插入项目，与所有其他项目（全部选中/取消选中）一样，请执行下一步：

// ...
var checked = $("#selectAllButton").is(':checked');
var cbRow = $('<input type="checkbox" class="msg_check" />');
cbRow.appendTo(list);
var checkbox = cbRow.find('.msg_check');

if (checked)
    checkbox.attr('checked', 'checked');
else
    checkbox.removeAttr('checked');
// ...

Answer 2

如果您尝试使用ajax调用继承 #selectAll复选框的当前状态附带的元素，那么您需要阅读它并在创建时应用它新元素。

所以

$.ajax({
    type: "POST",
    url: "GetMessages.asmx/GetMessagePreview",
    data: "{'FolderID': '5'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {

       var currentState = $("#selectAllButton").is(':checked') ? 'checked' : '';

       //code here to create a checkbox row (checkbox, message title, etc...)
       var cbRow = '<input type="checkbox" class="msg_check" '+ currentState +' />';
       //code here to insert to a div or other container   
}
 });

$("#selectAllButton").click( function(){
   // the way you normally select your elements..
   $('.msg_check')....
});

访问Ajax / Dynamic复选框

2 个答案: