javascript - Jquery mobile - 使用 pageinit 刷新复选框

标签 javascript jquery-mobile checkbox

我正在使用另一个页面上的链接列表调用一个页面(参见下面的代码)。像这样的列表

<ul data-role="listview" data-theme="g">
      <li><a href="test.html">test</a></li>
</ul>

以下代码为test.html页面。

我在这些页面上使用 jquery mobile。当通过单击链接加载页面时,只有前 3 个复选框之后的复选框似乎正确刷新(显示为已选中)。前三个复选框似乎始终未选中,并且它们的选中值设置为 false。不寻常的是,如果我在将复选框设置为 true 的语句之后放置一个 if 语句,则复选框选中的值评估为 true,但在呈现的页面上似乎为 false,您可以查看元素区域中的选中值的网络检查员。当您刷新页面(使用 F5 或地址栏附近的刷新按钮)时,复选框会按预期刷新。任何帮助将不胜感激。虽然下面的示例代码似乎只是将所有复选框设置为选中值,但我实际上(在我的真实页面中)根据记录集中的数据设置它们的值,所以我不能只将大量设置设置为 true 并刷新。我必须遍历记录集并相应地设置复选框值。下面的代码只是我遇到的错误的简单再现。谢谢!

<!doctype html> 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Checkbox</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
            <link rel="stylesheet" href="jqm1/jquery.mobile.structure-1.0.1.min.css" />
            <script src="jqm/jquery-1.7.1.min.js"></script>
            <script src="jqm/jquery.mobile-1.0.1.min.js"></script>

        </head>
        <body>
        <div id="loadCB" data-role="page">
            <script type="text/javascript">
                $("#loadCB").live('pageinit', function() {
                    // do something here...


                    for (i=0;i<=5;i++)
                    {
                    $("#checkbox-"+i).prop("checked", true);
                    $("#checkbox-"+i).prop("checked", true).checkboxradio("refresh");
                    }


                });
            </script>

            <article data-role="content">


                <form id="frmR">
                    <input type="checkbox" name="checkbox-0" id="checkbox-0" class="custom" value="0"/>
                    <label for="checkbox-0">checkbox-0</label> 
                    <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" value="1"/>
                    <label for="checkbox-1">checkbox-1</label> 
                    <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" value="2"/>
                    <label for="checkbox-2">checkbox-2</label> 
                    <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" value="3"/>
                    <label for="checkbox-3">checkbox-3</label> 
                    <input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" value="4"/>
                    <label for="checkbox-4">checkbox-4</label> 
                    <input type="checkbox" name="checkbox-5" id="checkbox-5" class="custom" value="5"/>
                    <label for="checkbox-5">checkbox-5</label> 

                    <input type="submit" value="Set Rules" />
               </form>             


            </article>           
        </body>
     </div>   
    </html>

最佳答案

检查这段代码

$("#loadCB").live('pageinit', function() {
                    // do something here...


                    $("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");


                });

关于javascript - Jquery mobile - 使用 pageinit 刷新复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9356485/

相关文章:

javascript - 如何使用较少混合的图像路径变量

javascript - jQuery/Javascript - 使用附加的查询字符串重新加载当前页面?

javascript - JQuery Mobile 应用程序,使用 HTML 5 进行移动通话

css - JQuery 移动版 : Replace thumbnail with data element

适用于 Firefox、Chrome、IE8 的 Android 复选框

javascript - MongoDB mapReduce 多键值计数问题

javascript - Asp mvc 和 Ajax 中的自动完成

javascript - 移动设备上的 jquery 事件处理程序 - 模仿绘图 Action

javascript - 选中两个复选框时背景颜色如何变化

javascript - 如何在更改另一个复选框时选中复选框?