Question

在下面的代码中，当我选中一个复选框时，它会显示所选项目的名称。但我现在的问题是，该表是分页的，所以当我移动到下一页并返回时，已检查的项目将返回未选中状态。当我选中一个框并使用ajax请求过滤时，同样适用，当我返回已经选中的框时，它将移动到未选中状态。

为什么会发生这种情况？如何解决此问题？

HTML

<table class="table" id="table" style="background-color:white" >
   <thead>
      <tr>
         <th></th>
         <th colspan="5"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      @foreach($items as $item) 
      <tr>
         <td><input onclick="return results(this)" data-item="{{$item->toJson()}}" type="checkbox" id="{!! $item->id !!}" name="{!! $item->name !!}" value="{!! $item->price !!}" /> </td>
         <td>{{$item->name }}</td>
      </tr>
      @endforeach       
   </tbody>
</table>
{{$items->links()}}

JS

function results(item){   
    var major = JSON.parse(item.dataset.item);
    if(item.checked == true)  {
     $('.panel').append(
        '<div class="container "> '+ 
        '<table style="width:100%;" class="table" id="tables">'+
        '<thead>'+'<thead>'+
        '<tbody>'+
         '<tr>'+ '<td  class="name" >'+major.name+'</td>'+] '</tr>'+
       '</tbody>'+'</table>'+'</div>')}
     } else {
     });
  }           
}
}

AJAX

success: function (data) {
   console.log(data);
   $("#table").slideDown('fast');
   var table = $("#table tbody");
   table.html("");
   $.each(data, function(idx, elem){
        table.append(
            "<tr><td><input type='checkbox' onclick='return results(this)' data-item='"+JSON.stringify(elem)+"' id='"+elem.id+"' name='"+elem.name+"' value='"+elem.price+"'  data-id="+elem.id+"  /></td><td >"+elem.name+"</td><tr>"
        );           
    });
}

如果ID存在，则选中保持复选框

0 个答案: