Jquery mobile-使用pageinit刷新复选框

Jquery mobile - Refreshing checkboxes with pageinit

本文关键字：刷新 复选框 pageinit 使用 mobile- Jquery      更新时间：2023-09-26

我正在使用从另一个页面上的链接列表中调用一个页面（请参阅下面的代码）。像这样的列表

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

下面的代码是test.html页面。

我在这些页面上使用jquery mobile。当通过单击链接加载页面时，只有前3个复选框之后的复选框才能正确刷新（显示为选中）。前三个复选框看起来总是未选中，并且其选中值设置为false。不寻常的是，如果我将if语句放在将复选框设置为true的语句之后，则复选框复选值将评估为true，但在呈现的页面上显示为false，并且您可以在web检查器的元素区域中查看复选值。刷新页面时（使用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");

                });

我写了一个相当全面的小部件列表和刷新它们的方法：http://andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews，-按钮，-选择下拉菜单，-和输入字段

也许这能回答你的问题？

相关文章：