Question

我有一个工作复选框提醒脚本：http://mauricederegt.nl/test/index.html

它只会记住复选框状态，因此当您稍后返回网页时，仍会检查是否取消选中。这很有用。

现在我需要在我的HTML页面中动态加载一个php页面（原始的php页面从我的数据库中获取一些内容并显示一个名称列表。在该列表下方，出现此复选框，然后是db中的另一个列表）。

我已经将复选框放在php文件中，但是当加载php文件时它将显示在HTML文件中。 js文件仍然在HTML文件中加载（也尝试将其加载到php文件中，但这没有效果）。

问题：不再记住该复选框:(见此演示：http://mauricederegt.nl/test/index2.html

我认为这是因为页面现在是动态加载的，并且在HTML中不可见？

如何解决此问题，以便再次记住该复选框？

如果需要，请查看js代码的HTML文件的源代码（这里发布的内容太多了）

亲切的问候，

php代码：

   <?php  
$q=$_GET["q"];
$checked = ($_GET['checked'] == 1 ) ? 'checked="checked"' : '';

if ($q == 1) {
echo '<ul>
        <li>Mike</li>
        <li>Peter</li>
        <li>Richard</li>
        <li>Quintin</li>
        </ul>
<div id="soundcheck" class="button blue"><input type="checkbox" value="Name" id="sound" '.$checked.' /><label for="sound"></label></div>
<ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Pineapple</li>
        </ul>';
}
?>

Answer 1

问题是检查然后设置复选框的记忆状态的代码仅在首次加载页面时被调用（绑定到DOM ready事件），因此在动态加载内容时不会调用。

调用现有代码的这一部分：

$('div#soundcheck input:checkbox').each(function() {
    // on load, set the value to what we read from storage:
    var val = storedData.get(this.id);
    if (val == 'checked') $(this).attr('checked', 'checked');
    if (val == 'not') $(this).removeAttr('checked');
    if (val) $(this).trigger('change');
});

动态加载复选框后，这应该可以解决问题。

编辑：您需要将以上代码添加到现有Javascript的此部分：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("scoreboard").innerHTML=xmlhttp.responseText;
        // add the above code here
    }
}

Answer 2

如果加载GET的php，我假设它返回以下内容：

<php
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound">
This is the checkbox, uncheck it and refresh the page. It should remain unchecked!
</div>
OUTPUT;

相反，让它返回：

为了让它更紧凑，我会选择：

<php
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound">
<label for="sound">This is the checkbox, uncheck it and refresh the page. It should remain unchecked!</label>
</div>
OUTPUT;

无论他们提交什么内容，都会返回一个空白复选框。

现在，如果问题是应保持检查，除非取消选中该框，请执行以下操作：

<php
$checked ($_GET['checked'] == 1 ) ? 'checked="checked" : '';
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound" $checked>
<label for="sound">This is the checkbox, uncheck it and refresh the page. It should remain unchecked!</label>
</div>
OUTPUT;

在你的js中有以下内容：

xmlhttp.open("GET","test.php?q="+str+"&checked=1",true);

复选框提醒脚本在动态加载包含复选框的test.php时不记得复选框状态

2 个答案: