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

Question

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

它只是记住复选框的状态，所以当你稍后回到网页时，它仍然会被选中到未选中。这一切都很好。

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

我已经在 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 就绪事件），因此在动态加载内容时不会调用。

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

$('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);