选中时,ajax加载应保持我复选框的状态
ajax load should remain the status of my checkbox when checked
当我在分页中使用.load()ajax/jquery时,我在这里遇到了一个问题。当我转到另一个页面时,复选框的状态将不会保留。例如,我在第1页中选中了2个项目,然后当我转到第2页选择另一个项目时,然后当返回第1页测试我选中的项目是否保持选中状态时。不幸的是,它被取消选中了,可能是因为.load()。如果有其他选择可以使用side.load()来保持我的复选框处于选中状态,请帮助我。
这是我为.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>
嗨@charleshaa它不起作用这就是我对我的脚本所做的
这是我的复选框代码
echo "<div id='a'><input type='checkbox' class='tick' name='items[$i]' id='$i' value='". $item['ItemID'] ."' >".$item['ItemName']."</div>";
怎么了??我急需帮助
您需要在变量中保留复选框,以便在加载后重新检查它们。
首先在复选框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()
在这个例子中,你可以这样写:
$('body').on('click', '.paginate_click', function(e){
//code
});
它的性能要好得多,因为它只将一个事件侦听器附加到主体,而不是将一个附加到每个.paginate_click
。
查看我对唯一ID的评论,你应该可以离开了。
相关文章:
- 基于复选框状态的条件数学
- 导航到另一个页面后,复选框状态会更改
- 如何根据各种复选框状态执行操作
- 检查复选框状态-Javascript
- JavaScript-使用sessionStorage保存文档之间共享的复选框状态
- React.js可以't更改复选框状态
- 如何检查更改事件的复选框状态
- 基于各种用户行为管理复选框状态
- 根据 ajax 响应中的值设置复选框状态
- 从 django 读取复选框状态
- 分析获取查询字符串并使用值更改复选框状态
- 是否可以在不导致单击事件的情况下更改复选框状态
- 如何在 javascript 的信息窗口中使用 cookie 保存复选框状态
- 复选框提醒脚本在动态加载测试时不记得复选框状态.php其中包含复选框
- 保持选中复选框状态,直到用户取消选中
- 复选框状态(如果未选中)
- 复选框状态和其他属性
- 根据 AngularJS 中的多个条件更改复选框状态
- 自动将复选框状态/值保存到数据库
- 在复选框状态ExtJS 4.1中手动检测与编程更改