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

Answer 1

可以通过"JavaScript - localStorage"功能保存状态。今天，浏览器能够保存更清洁，更清洁的信息。然后提供信息cookies.

On＆＃34;复选框＆＃34; element我会添加一个事件监听器来启动名为"saveState()"的函数。在这个函数中，我将保存有关复选框的信息。

function saveState()
{
    localStorage.setItem("checkBoxStatus", "Checked");
}

此信息会保存到浏览器的存储空间中，在您自行删除之前不会被删除。要删除它，您有两个选择：

`localStorage.removeItem("checkBoxStatus");` 
`localStorage.clear();`

然后当你重新进入那个页面时，你正在构建＆＃34;查看你可以添加小功能，将设置状态等于＆＃34;保存＆＃34;之一。

function resumeState()
{
    if(localStorage.getItem("checkBoxStatus") === "Checked)
         //get check box and check or uncheck
}

如何使用已存储的数据

这是我的观点，但我更喜欢通过JavaScript构建我的 HTML 视图，因为我发现它更简洁，也更容易，因为今天你经常沟通具有"JavaScript/Ajax"功能并需要更多响应。

因此我将使用JavaScript Dom构建我的整个视图 **

function buildView()
{
    var element = document.createElement("div"); 
        var checkBox = document.createElement("input"); 
            checkBox.settAttribute("type", "checkbox");
        //here we will check
        localStorage.getItem("checkBoxStatus") === "Checked" ? checkBox.setAttribute("checked", "true") : checkBox.setAttribute("checked", false); 
        element.appendChild(checkBox);
    document.body.appendChild(element);
}

**

或使用setTimeout功能并坚持使用＆＃34; HTML＆＃34;的观点：

<body onload='setTimeout(buildView(), 2000);>'

这将等到所有views都构建完毕并在它之后开始。您可以根据在＆＃34; onload＆＃34;期间加载的数据量来设置正确的时间。事件。如果是小数据，您甚至可以等待1秒钟 - ＆gt; 1000

 function buildView()
{
     var checkBox = document.getElementById("checkBox"); 
        //here we will check
        if(localStorage.getItem("checkBoxStatus") === "Checked")
        {
            checkBox.setAttribute("checked", "true");
        }
        else 
        {
            checkBox.setAttribute("checked", false);
        }
}

请记住，这里主要是使用localStorage功能来保存数据，之后你将如何使用这些数据，完全取决于开发人员的想象力和创造力

Answer 2

我为你做了一个小提琴，以便你可以按照你的目的使用它来改进它，这里是the fiddle和代码：

HTML：

<div class="checkbox-set">

</div>

<div id = "result">

</div>

JS：

var id = "";
for(i=1 ; i<8 ;i++){
    id="checkbox_"+i;
    $('.checkbox-set').append('<input type="checkbox" id="'+ id +'" value="Click on me"/> <label for="'+id+'">Click on me</label> <br/> ');
}
var selected = [];
        if(sessionStorage.selected) {
    // selected = sessionStorage.selected;
    var checkedIds= sessionStorage.selected.split(",");
    $.each(checkedIds,function(i){
    $("#" + checkedIds[i]).prop('checked', true);
    selected.push(checkedIds[i]);
});

    }

$('input[type="checkbox"]').change(function() {
    if(this.checked) {        
        $(this).each(function(){
        selected.push($(this).attr('id'));
        //$("#result").html(selected);
        });
    }
    if(!this.checked) {
         const index = selected.indexOf($(this).attr('id'));
         var tt= selected.splice(index, 1);
             //$("#result").html(selected);
    }

    sessionStorage.selected = selected;

    $("#result").html(sessionStorage.selected);

})

请确认是否有帮助

在javascript中隐藏表格页面

2 个答案:

如何使用已存储的数据