Question

我正在使用HTML5和jquery mobile制作应用。我有一个页面，我从服务器通过ajax输入，并以下列格式显示在可折叠的下拉菜单中：

Collapsible tab title1
Id: 1
Account: 1
Amount: 500

Collapsible tab title2
Id: 2
Account: 2
Amount: 500

and so on.

我希望在此标签标题上有一个复选框，当勾选时，会将id的值存储在变量中。

例如：

Collapsible tab title1 checkbox ticked. (for this title1, id is 1)
var identity = 1; (store 1 in a variable)

在页面底部，我有一个确认按钮。点击它后，此信息将发送到网址www.awebsite.com/id=1

我完成了应用程序的每一点而不是这一部分。我需要在两个方面提供帮助。

1.如何在我的可折叠标签标题中添加一个复选框。

2.选中复选框后，如何将ID信息存储在变量中。

我已经解决了将变量信息发送到网址的部分。有人可以帮我两个部分。我尝试查找教程，但信息是分开的，他们要么谈论如何制作可折叠的集合，要么创建一个复选框。也没有找到任何关于通过复选框存储信息的例子。

以下是从服务器获取信息的页面和代码的代码。感谢。

HTML

<div data-role="page" id="unpaidBills" data-theme="e">
            <header data-role="header">
            <h1>Unpaid Bills</h1>    
        </header>
        <article data-role="content">
            <div data-role="collapsible-set" id="unpaidList">
                <!--wil fill up with info from database-->
            </div>
        </article>
        <footer data-role="footer" data-position="fixed">
                <h1></h1>
        </footer>
        </div>

脚本

$.getJSON("http://mywebsite.com/public/user/listunpaidbills/",function(data){
            //Loop for each element on the data
            $.each(data,function(elem){
                var wrap = $("<div/>").attr('data-role', 'collapsible');
                //Create the h1 and the other elements appending them to bills List
                $("<h1/>",{
                    text:data[elem].reference //this is the title
                }).appendTo(wrap);   
                $("<p/>",{
                    text:"ID: "+ data[elem].id
                }).appendTo(wrap);   
                $("<p/>",{
                    text:"Account: "+ data[elem].account
                }).appendTo(wrap);        
                $("<p/>",{
                    text:"Amount: "+ data[elem].amount
                }).appendTo(wrap);
                wrap.appendTo('#unpaidList');    
            })//end of for each loop
            $( "#unpaidList" ).collapsibleset( "refresh" );
        })

编辑：

<div data-role="page" id="apple" data-theme="e">
          <div data-role="header">
          <h1>Title</h1>
          </div>

          <div data-role="main" class="ui-content">           
              <fieldset data-role="collapsible">
                <legend>Header</legend>

                <div data-role="controlgroup">
                  <label for="id">ID: 1</label>
                  <input type="checkbox" name="id" id="id" value="id">
                </div>  
              <input type="submit" data-inline="true" value="Confirm">
              </fieldset>           
          </div>
        </div>

在可折叠标题和商店ID信息上放置一个复选框

0 个答案: