Php 使用jQuery使用复选框中的值更新URL，并在刷新后保持选中状态
我发现了一个非常好的jQuery脚本，它可以帮助我从作为数组发送到URL的复选框中获取值。这很好，但我需要在每次选择后刷新页面，但这样做，谷歌浏览器中的复选框将取消选中（在FF中效果良好）。URL保持良好，但复选框均未选中 jQuery中有没有办法在刷新后保持复选框处于选中状态？通常，对于我来说，当希望在发布或刷新后选中复选框时，我可以在复选框中使用if语句，即说if（$\u GET[selected]==$value）{echo“checked”；} 您可以在此处测试代码： 代码如下所示：Php 使用jQuery使用复选框中的值更新URL，并在刷新后保持选中状态,php,jquery,Php,Jquery,我发现了一个非常好的jQuery脚本，它可以帮助我从作为数组发送到URL的复选框中获取值。这很好，但我需要在每次选择后刷新页面，但这样做，谷歌浏览器中的复选框将取消选中（在FF中效果良好）。URL保持良好，但复选框均未选中 jQuery中有没有办法在刷新后保持复选框处于选中状态？通常，对于我来说，当希望在发布或刷新后选中复选框时，我可以在复选框中使用if语句，即说if（$\u GET[selected]==$value）{echo“checked”；} 您可以在此处测试代码： 代码如下所示： &
<?
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[PHP_SELF]";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Konfigurator</title>
<link rel="stylesheet" href="main.css" />
<style type="text/css">
body,td,th {
font-family: Tahoma, "Titillium Web", sans-serif;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="flowers">
<?
$hent_access = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
while($hent_access_data = mysql_fetch_array($hent_access)){
$erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
?>
<div class="flowers">
<label>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td><img src="images/<?=$hent_access_data[vnr]?>.jpg" width="150" class="apply_image" /></td>
</tr>
<tr>
<td class="product_list_header"><?=$erstat2?></td>
</tr>
<tr>
<td class="product_list_header">kr. <?=$hent_access_data[pris]?></td>
</tr>
<tr>
<td class="product_list_header"><input type="checkbox" name="selected[]" value="<?=$hent_access_data[vnr]?>" /></td>
</tr>
</table>
</label>
</div>
<?
}
?>
</div>
<script>
$('input[type="checkbox"]').on('change', function(e){
var data = [],
loc = $('<a>', {href:window.location})[0];
$('input[type="checkbox"]').each(function(i){
if(this.checked){
data.push(this.name+'='+this.value);
}
});
data = data.join('&');
$.post('<?=$actual_link?>', data);
if(history.pushState){
history.pushState(null, null, loc.pathname+'?cart=<?=$_GET[cart]?>&'+data);
location.reload();
}
});
</script>
</body>
</html>
空想家
正文，td，th{
字体系列：塔荷马，“提香网”，无衬线；
}
.jpg“width=“150”class=“应用图像”/>
韩元。
您在页面加载上而不是在更改事件上迭代选定的框。
您有两个选项，一个提交按钮或每次单击复选框时发布
您提到您希望等到选中所有复选框之后，但是脚本永远不会知道用户已完成单击复选框，除非您有提交按钮。但是，在这种情况下，根据您的问题，您不需要提交按钮
以下内容将在单击“打开”或“关闭”复选框时发布所选值。每次操作复选框时都会触发该事件，您返回的数据可用于操作表或返回HTML。在本例中，它将从hello.php以HTML形式返回数据，然后将该响应放在id为的div元素中“结果”的定义
****新增问题****
.jpg“width=“150”class=“应用图像”/>
韩元。
***为新问题编辑***
在HTML5中，您可以使用History.pushState（）在不离开页面的情况下更改url。请注意大写字母H。如果可以使用ajax并更改url，则无需更改页面。为了向后兼容，请使用History.js。是的，但是我需要为一些PHP重新加载页面-正如您所看到的，脚本包含工作正常的pushState，但是我也需要在刷新时保持选中复选框。为什么需要刷新页面？PHP都可以在ajax调用中完成，数据以json返回，信息也可以相应地用js或jQuery更新。如果要加载页面，为什么还要使用pushState（）？只需使用window.location加载页面。这是一样的。如果希望复选框保持选中状态，则需要将某些内容传递到url以获取post中可用的GET或post数据。或者只需使用ajaxintesting@zgr024-我需要URL中的值来创建一个PHP循环，该循环检索表中的列id，以显示图像并累积价格。如果这可以在不刷新的情况下“即时”完成，那绝对是很酷的。你能带我上路吗？@MazeyMazey非常感谢@zgr024-等我回到电脑前，我会试试这个。我开始看到你所解释和展示的内容的结构，所以我非常希望能更熟悉这一点。我稍后会测试-再次感谢。这绝对是完美的！它就像一个符咒，我确实更善于理解jQuery中的逻辑：-）我会接受你的答案，我真的很感谢你在这方面的帮助。我还有一个问题，但这与我希望复选框超过一定大小（我已将其存储在hello.php文件中的一个变量中）时隐藏复选框有关。在这里发布一个新问题是正确的吗？。。。再次感谢！实际上，最好先问一个新问题或自己尝试一下。但是将限制放在带有复选框的页面上，而不是放在php中。可以使用表单中的隐藏字段执行此操作，并将数字放置在数据属性中。然后将它们添加到更改事件中。Great@zgr024-我已经编辑了我的帖子，因此最后一部分包含了最后一个问题-如果您有任何问题，请告诉我，因为我有点难以解释：-）请查看我对答案所做的编辑。您不应该使用post来确定使用了什么和可用的内容。事实上，我会考虑不使用POST，因为您可以在没有PHP和新查询的情况下操作HTML，通过将您需要的所有数据属性放置在数据属性中。
<form action="" method="post">
<?
$hent_access = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
while($hent_access_data = mysql_fetch_array($hent_access)){
$erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
?>
<label>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td><img src="images/<?=$hent_access_data[vnr]?>.jpg" width="150" class="apply_image" /></td>
</tr>
<tr>
<td class="product_list_header"><?=$erstat2?></td>
</tr>
<tr>
<td class="product_list_header">kr. <?=$hent_access_data[pris]?></td>
</tr>
<tr>
<td class="product_list_header"><input type="checkbox" name="selected[]" value="<?=$hent_access_data[vnr]?>" /></td>
</tr>
</table>
</label>
<?
}
?>
</form>
<script>
var data = $("form").serialize();
var checked = []
$("input[name='selected[]']:checked").each(function ()
{
$.ajax({
url: "hello.php",
type: "POST",
async: true,
cache: false,
data: data,
success: function(data){
alert(data)
}
});
});
</script>
<?php
include('../settings.inc.php');
foreach ($_POST[selected] as $value) {
$list_valg = mysql_query("SELECT * FROM bato_produkter WHERE vnr = '$value'");
$list_valg_data = mysql_fetch_array($list_valg);
$pris += $list_valg_data[pris];
$space_used += $list_valg_data[funktion];
}
echo $pris." - Space used ".$space_used."<br/>Total Space available ".$vogn_space;
?>
<form action="" method="post">
**** ADDED FOR NEW QUESTION ****
<input type="hidden" id="totalSpaces" value="12">
<?
$hent_access = mysql_query("SELECT * FROM bato_produkter WHERE typen = 2");
while($hent_access_data = mysql_fetch_array($hent_access)) {
$erstat2 = str_replace('BATO','bata',$hent_access_data[navn]);
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td><img src="images/<?=$hent_access_data[vnr]?>.jpg" width="150" class="apply_image" /></td>
</tr>
<tr>
<td class="product_list_header"><?=$erstat2?></td>
</tr>
<tr>
<td class="product_list_header">kr. <?=$hent_access_data[pris]?></td>
</tr>
<tr>
*** EDITED FOR NEW QUESTION ***
<td class="product_list_header"><input type="checkbox" name="selected[]" value="<?=$hent_access_data[vnr]?>" data-spaces="<?=$hent_access_data['pris']?>" /></td>
</tr>
</table>
<?
}
?>
</form>
<div id="result"></div>
<script>
*** ADDED FOR NEW QUESTION ***
var totalSpaces = $('#totalSpaces').val();
var usedSpaces = 0;
// triggered when user clicks a checkbox
$('input[name="selected[]"]').on('change',function () {
*** ADDED FOR NEW QUESTION ***
currentSpaces = parseInt($(this).data('spaces');
if ($(this).is(':checked')) usedSpaces += currentSpaces;
else usedSpaces -= currentSpaces;
if (usedSpaces > totalSpaces) {
alert('Will not fit');
return false;
}
// grabs the selected checkbox values
var data = $("form").serialize();
// Sends the data via POST to hello.php
$.ajax({
url: "hello.php",
type: "POST",
dataType: 'html',
async: true,
cache: false,
data: data,
success: function(data) {
*** ADDED FOR NEW QUESTION ***
if (usedSpaces == totalSpaces) {
alert ('All spaces used');
$('input[name="selected[]"]').not(':checked').prop('disabled',true);
}
else {
$('input[name="selected[]"]').prop('disabled',false);
}
$('#result').html(data);
}
});
});
</script>