【发布时间】：2017-09-21 03:51:27
【问题描述】：
我承认，我仍然是 jquery 的菜鸟，我有一个页面，总共有 12 个按钮/切换按钮（仅显示 3 个作为示例），当单击每个按钮时，都会拉出一个 php 页面，其中列出了一组复选框在高级搜索页面上的 div 中包含产品。由于每个复选框列表之间有很多信息，它会减慢系统速度，因此我必须在单击时创建一个事件，它会在需要时从另一个 php 页面中提取该复选框信息。问题是......当我在按钮之间切换时，复选框不会保持选中状态。我尝试了一个功能，它在检查时设置本地存储项，但似乎不起作用。因此，需要您帮助了解如何在通过每个按钮/切换返回时使复选框保持选中状态。
那么有没有办法在切换时让我的复选框保持选中状态？以及如何（请使用代码示例）
有没有更好的方法可以提高这项工作的效率，从而更快地加载页面？如果是这样，如何？ （请使用代码示例）
KITE_PAGE.PHP（球类、呼啦圈等产品也一样）
<div>
<input type="checkbox" class="product_chkKite101" name="product_chk" value=" Like Kite 101 " /><label >Like USA Kite</label>
<input type="checkbox" class="product_chkKite102" name="product_chk" value=" Like Kite 102 " /><label >Like Mexico Kite</label>
<input type="checkbox" class="product_chkKite103" name="product_chk" value=" Like Kite 103 " /><label >Like Canada Kite</label>
</div>
NOTLIKE_KITE_PAGE.PHP（对球、呼啦圈等产品同样适用）
<div>
<input type="checkbox" class="product_chkKite101" name="product_chk" value=" Not Like Kite 101 " /><label >Not Like USA Kite</label>
<input type="checkbox" class="product_chkKite102" name="product_chk" value=" Not Like Kite 102 " /><label >Not Like Mexico Kite</label>
<input type="checkbox" class="product_chkKite103" name="product_chk" value=" Not Like Kite 103 " /><label >Not Like Canada Kite</label>
</div>
高级搜索页面：
来自高级搜索页面的 HTML
按钮（同样只显示了三个）：
<ul class="category">
<li><a href="#kite" class="category-btn kite-btn">KITES</a></li>
<li><a href="#ball" class="category-btn ball-btn">BALLS</a></li>
<li><a href="#hoop" class="category-btn hoop-btn">HULA HOOPS</a></li>
</ul>
页面将加载到的 Div：
<div id="product_container" >
<div class="kite box" >
<div class="tx-row" id='kite-in' >
</div>
<div class="tx-row" id='kite-x' >
</div>
</div>
<div class="ball box" >
<div class="tx-row" id='ball-in' >
</div>
<div class="tx-row" id='ball-x' >
</div>
</div>
<div class="document box" >
<div class="tx-row" id='hoop-in' >
</div>
<div class="tx-row" id='hoop-x' >
</div>
</div>
</div>
单击按钮时检索信息的JQuery
$(document).ready(function(){
var $content = $('.box');
function showContent(type) {
$content.hide().filter('.' + type).show();
}
$('.category').on('click', '.kite-btn', function(e) {
if ($('#kite-in').is(':empty')){
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}else {
$("#kite-in").load("/wp-content/themes/child/kite_page.php");
$("#kite-x").load("/wp-content/themes/child/notlike_kite_page.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}
});
$('.category').on('click', '.ball-btn', function(e) {
if ($('#ball-in').is(':empty')){
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}else {
$("#ball-in").load("/wp-content/themes/child/ball_page.php");
$("#ball-x").load("/wp-content/themes/child/notlike_ball_page.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}
});
$('.category').on('click', '.hoop-btn', function(e) {
if ($('#hoop-in').is(':empty')){
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}else {
$("#hoop-in").load("/wp-content/themes/child/hoop_page.php");
$("#hoop-x").load("/wp-content/themes/child/notlike_hoop_page.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
}
});
$(".box").hide();
});
对此还有一个附加问题： 当在页面之间检查一个复选框时，有没有办法禁用具有相同类的复选框（例如：class="product_chkKite101"）？
【问题讨论】：
-
这是重现问题的最低代码吗？
-
localstorage 应该适用于您的情况
标签： javascript php jquery ajax checkbox