选中时，ajax load应保持为我的复选框的状态 [英] ajax load should remain the status of my checkbox when checked

问题描述

当我在分页中使用它时，我在使用.load（）ajax / jquery时遇到问题。当我转到另一页时，我的复选框的状态将不会保留。例如，我检查了第1页中的2个项目，然后当我转到第2页以选择另一个项目时，然后当我返回到第1页以测试我的选中项目是否仍然被选中时。不幸的是，它可能因为.load（）而未经检查。请帮助我，如果有替代方法可以使用.load（）来保持我的复选框选中。

I have a problem here using .load() ajax/jquery when I use it in pagination. the status of my checkbox will not remain when I go to another page. For example I checked 2 items in page 1 then when I go to page 2 to select another item then when I go back to page 1 to test if my checked item remain checked. unfortunately it became unchecked maybe because of the .load(). Please help me if there is alternative to use aside .load() to remain my checkbox checked.

这是我的代码.load（）ajax：

here is my code for .load() ajax:

<script type="text/javascript">
$(document).ready(function() {
    $("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');});

    $(".paginate_click").click(function (e) {


        var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
        var page_num = parseInt(clicked_id[0]); 

        $('.paginate_click').removeClass('active'); 
        $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){

        });

        $(this).addClass('active');
        return false;
    }); 
});
</script>

---

---

<script type="text/javascript">
$(document).ready(function() {
    $("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');});  //initial page number to load
    $('body').on('click', '.paginate_click', function(e){
    // Get all the checked boxes and store their ID in an array
    var ticked = [];
    $('.tick:checked').each(function(){
      ticked.push($(this).attr("id"));
    });


    var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
    var page_num = parseInt(clicked_id[0]); 

    $('.paginate_click').removeClass('active'); 
    $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
       // Content has loaded but is still raw
       // We loop through IDs and check'em
       ticked.forEach(function(val, i){
          $(val).prop('checked', true);
       });
    });

    $(this).addClass('active');
    return false;
});     
});
</script>

hi @charleshaa它不起作用这就是我对我的剧本所做的

hi @charleshaa it doesnt work this is what i did to my script

这是我的复选框代码

echo "<div id='a'><input type='checkbox' class='tick' name='items[$i]' id='$i' value='". $item['ItemID'] ."' >".$item['ItemName']."</div>";

出了什么问题？我非常需要帮助

What's wrong?? Im badly need help

推荐答案

您需要在变量中保留复选框，以便在加载后重新检查它们。

You need to keep you checked boxes in a variable so you can recheck them after the load.

首先在复选框中添加一个类 class =tick。

First add a class to your checkboxes class="tick".

然后你会：

$(".paginate_click").click(function (e) {
    // Get all the checked boxes and store their ID in an array
    var ticked = [];
    $('.tick:checked').each(function(){
      ticked.push($(this).attr("id"));
    });


    var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
    var page_num = parseInt(clicked_id[0]); 

    $('.paginate_click').removeClass('active'); 
    $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){
       // Content has loaded but is still raw
       // We loop through IDs and check'em
       ticked.forEach(function(val, i){
          $(val).prop('checked', true);
       });
    });

    $(this).addClass('active');
    return false;
}); 

编辑：

此外，最好不要使用 .click（）表示法，而应始终使用。on（）

Also, it is preferable not to use the .click() notation, instead, you should always use .on()

在这个例子中，你会这样写：

In this example, you would write it like this :

$('body').on('click', '.paginate_click', function(e){
  //code
});

性能要好得多，因为它只将一个事件监听器附加到正文，而不是附加一个每 .paginate_click 。

It is much better for performance as it only attaches one event listener to body, instead of attaching one to every .paginate_click.

检查我对唯一ID的评论，你应该好好去。

Check my comment about the unique IDs and you should be good to go.

这篇关于选中时，ajax load应保持为我的复选框的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！