Jquery mobile Jquery mobile的ListView中的复选框

我开始学习HTML5和CSS（使用jQueryMobile），因为我在这方面没有太多背景知识，所以我被困在一些非常简单的事情上。 我想在列表视图中（在每个li处）放置一个复选框。 我如何才能做到这样： （我的意思是复选框位于其他文本和所有文本的左侧）

目前，我的代码是： 如您所见，复选框位于文本上方，即使在第二个li中有一个带float:left的div，它也不起作用：(

你能帮我吗？ 在此之前非常感谢您的回答，并为我的英语感到抱歉^^

祝你今天愉快

奥利弗

编辑：

我终于成功地在右边的左边添加了一个复选框。 我更新了我的示例：

---

我不知道这是否是正确的方法，但它是有效的：）

我重新思考了我以前的答案，并重新做了这个问题，特别是为了适应mvc 4框架，但客户端都是一样的。
让我们开始：
如果您只需要html，可以在此处获取
此链接指向由三部分组成的复选框列表、复选框、项目链接和信息弹出窗口：

iv在末尾添加了2个部分列表框和一个部分，如有任何问题，请告知我

现在对于控制器，您需要做的就是

[Authorize]
public ActionResult Items(string act, 
    string tab, string search_by, string search, string sort, string sortdir, int? page, int? resultsPerPage,
    List<int> selected, int? projectId, string username)
{
    if (act == "AddItemsToUser")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Added:";
            foreach (var item in selected)
            {
                try
                {
                    if (username != null)
                        if (UserItemRecordModel.InsertUserItem(username, item, null, null, 0, null, null))
                            response += item + " - inserted, ";
                }
                catch (Exception ex)
                {
                    response += item + " - " + ex.Message + ", ";
                }
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }
    else if (act == "AddItemsToProject")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Added:";
            foreach (var item in selected)
            {
                try
                {
                    if (projectId != null)
                        if (ProjectItemRecordModel.InsertProjectItem(projectId.ToString(), item, null, null, 0, null, null))
                            response += item + " - inserted, ";
                }
                catch (Exception ex)
                {
                    response += item + " - " + ex.Message + ", ";
                }
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }
    else if (act == "RemoveItemsFromUser")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Removed:";
            foreach (var item in selected)
            {
                try
                {
                    if (UserItemRecordModel.DeleteUserItem(username, item))
                        response += item + " - deleted, ";
                }
                catch (Exception ex)
                {
                    response += item + " - " + ex.Message + ", ";
                }
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }
    else if (act == "RemoveItemsFromProject")
    {
        string response;
        if (selected != null)
        {
            response = "Project Items Removed:";
            foreach (var item in selected)
            {
                if (ProjectItemRecordModel.DeleteProjectItem(projectId.ToString(), item))
                    response += item + " - deleted, ";
            }
            response.TrimEnd(' ', ',');
        }
        else
        {
            response = "No Items Were Selected!";
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }

    List<ItemRecordModel> items = ItemRecordModel.GetSensors(search_by, search, sort, sortdir);
    return View("Items", new AdminRecordsViewModel() { Records = items });
}

[授权]
公共动作结果项（字符串动作，
字符串选项卡、字符串搜索依据、字符串搜索、字符串排序、字符串排序、int？page、int？resultsPerPage、，
选定列表，int？projectId，字符串用户名）
{
如果（act==“AddItemsToUser”）
{
字符串响应；
如果（已选择！=null）
{
response=“添加的项目项：”；
foreach（所选中的var项目）
{
尝试
{
如果（用户名！=null）
if（UserItemRecordModel.InsertUserItem（用户名、项、null、null、0、null、null））
响应+=项目+“-插入”；
}
捕获（例外情况除外）
{
响应+=项目+“-”+例如消息+“，”；
}
}
回答：TrimEnd（“，”）；
}
其他的
{
response=“未选择任何项目！”；
}
返回Json（response，JsonRequestBehavior.AllowGet）；
}
否则，如果（act==“AddItemsToProject”）
{
字符串响应；
如果（已选择！=null）
{
response=“添加的项目项：”；
foreach（所选中的var项目）
{
尝试
{
if（projectId！=null）
if（ProjectItemRecordModel.InsertProjectItem（projectId.ToString（），item，null，null，0，null，null））
响应+=项目+“-插入”；
}
捕获（例外情况除外）
{
响应+=项目+“-”+例如消息+“，”；
}
}
回答：TrimEnd（“，”）；
}
其他的
{
response=“未选择任何项目！”；
}
返回Json（response，JsonRequestBehavior.AllowGet）；
}
否则如果（act==“RemoveItemsFromUser”）
{
字符串响应；
如果（已选择！=null）
{
response=“项目项已删除：”；
foreach（所选中的var项目）
{
尝试
{
if（UserItemRecordModel.DeleteUserItem（用户名，项））
响应+=项目+“-已删除”；
}
捕获（例外情况除外）
{
响应+=项目+“-”+例如消息+“，”；
}
}
回答：TrimEnd（“，”）；
}
其他的
{
response=“未选择任何项目！”；
}
返回Json（response，JsonRequestBehavior.AllowGet）；
}
else if（act==“从项目中移除项目”）
{
字符串响应；
如果（已选择！=null）
{
response=“项目项已删除：”；
foreach（所选中的var项目）
{
if（ProjectItemRecordModel.DeleteProjectItem（projectId.ToString（），item））
响应+=项目+“-已删除”；
}
回答：TrimEnd（“，”）；
}
其他的
{
response=“未选择任何项目！”；
}
返回Json（response，JsonRequestBehavior.AllowGet）；
}
列表项=ItemRecordModel.GetSensors（按搜索、搜索、排序、排序）；
返回视图（“项目”，新AdminRecordsViewModel（）{Records=Items}）；
}

这是我以前的回答：
我解决了您的问题您需要更改一些内容，但您可以通过复选框实现可搜索列表视图，如下所示：

JSFIDLE示例：

---

基本：

更好的版本：

这是复选框的列表视图和搜索栏。您应该添加这个js代码
$（“li”）。打开（“点击”，函数（）{
$（this）。查找（'label'）。单击（）；
});    在页面的某个按钮中。
当用户单击li时，js代码会单击复选框
选择类别
你会得到关于这些主题的文章，你可以随时更改你的选择。


体育


食物


here is a listView of checkBox and a search bar. you should add this js code 

 $("li").on("tap",function(){
                     $(this).find('label').click();
   });    in the button somewhere in your page.



the js code crete a click on the check box when the user clicks on the li

 <div class="ui-content" data-role="main">  
    <div data-role="main" class="ui-content">
         <h2 class="settings-h2">Select category</h2>
         <h5 lass="settings-h2">You will get articles on those subject,you can change your selection at any time.</h5>
        <form class="ui-filterable">
            <input id="myFilter-settings" data-type="search">
        </form>
         <ul data-role="listview" id="ScheduleList-settings" data-filter="true" data-input="#myFilter-settings"  data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">



             <li  data-icon="false">
                 <form>
                <fieldset class="myhover" data-role="controlgroup" data-iconpos="right" >
                    <input type="checkbox" name="checkbox-h-6a" id="checkbox-Sports" >
                    <label  for="checkbox-Sports">Sports</label>
                </fieldset>
                </form>

            </li>


             <li data-icon="false" >


                 <form>
                <fieldset data-role="controlgroup" data-iconpos="right" >
                    <input type="checkbox" name="checkbox-h-6a" id="ccheckbox-Food" >
                    <label  for="ccheckbox-Food">Food</label>
                </fieldset>
                </form>


            </li>


             <li data-icon="false" >

                 <form>
                <fieldset data-role="controlgroup" data-iconpos="right" >
                    <input type="checkbox" name="checkbox-h-6a" id="checkbox-Politics" >
                    <label  for="checkbox-Politics">Politics </label>
                </fieldset>
                </form>


             </li>



             <li data-icon="false"  >

                 <form>
                <fieldset data-role="controlgroup" data-iconpos="right" >
                    <input type="checkbox" name="checkbox-h-6a" id="checkbox-Fashion" >
                    <label  for="checkbox-Fashion">Fashion</label>
                </fieldset>
                </form>


             </li>






            </ul>
     </div>

</div>