Question

我找到了一个非常好的jQuery脚本，它可以帮助我从作为数组发送到URL的复选框中获取值。这很有效，但我需要在每次选择后刷新页面，但是通过这样做，复选框在Google Chrome中取消选中（在FF中正常工作）。 URL保持正常，但复选框都取消选中。

jQuery中是否有任何方法可以在刷新后检查选中的复选框？通常对我来说，当想要在帖子或刷新后检查复选框时，我可以在复选框中使用if语句，即if（$ _ GET [selected] == $ value）{echo“checked”; }

您可以在此处测试代码：http://mazey.dk/bato/temp.php

代码如下所示：

<?
$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>

----编辑----

在阅读了评论并研究了一段时间之后，我现在正试图通过jQuery和AJAX调用来完成所有这些，因为我能读到的内容是最正确的（我可以学习一些全新的东西）。所以这就是我到目前为止所做的：

<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>

hello.php文件如下所示：

<?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;

?>

现在我已经收到警告以显示结果，但只有当我手动刷新页面（CTRL + R）时，它才会为每个选中的复选框加载一个警告框。

我现在想要完成的是，当我选中一个复选框时，警告框会显示来自hello.php的结果，但只会累积一次所有复选框。

-----编辑-----

现在一切都像我想要的那样，所以这绝对是完美的！作为扩展，我还有一件事：如果您查看网站 - http://mazey.dk/bato/temp.php

当您使用单选按钮选择第一个项目时，复选框会显示。选中复选框后，您可以在左上角看到选择的状态以及可用的空间。对于带有复选框的产品，它们都需要一定的空间。在视觉上它显示在文本的最后部分（1 / 3,2 / 3或1/1），但它也存储在每个产品的表格行中（存储为整数; 1,2,3）。

如果产品空间超出可用空间，您能否带领我如何完成产品+隐藏复选框？

非常感谢！

Answer 1

您正在遍历页面加载时的选定框而不是更改事件。每次点击一个复选框时，您有2个选项，一个提交按钮或帖子。

你提到你想要等到所有复选框都被检查完毕，但是除非你有一个提交按钮，否则脚本永远不会知道用户点击了复选框。但是，在这种情况下，您根据自己的问题不想要提交按钮。

以下内容将在单击复选框打开或关闭时发布所选值。每次操作一个复选框时都会触发该事件，并且您返回的数据可用于操作表，或者它可以返回HTML。在这个例子中，它将数据作为HTML从hello.php返回，然后将该响应放在id为＆＃34的div元素中;结果＆＃34;

<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>

请参阅标记为已添加或已编辑的编辑

使用jQuery更新带有复选框值的URL，并在刷新后继续检查

1 个答案: