jQuery Mobile：组合listview和checkbox字段集 [英] jQuery Mobile: combine listview and checkbox fieldset

问题描述

在jQuery Mobile中，我想要一个垂直的项目列表，用户可以通过点击它们来选择。

In jQuery Mobile, I want to have a vertical list of items which the user can select by tapping on them.

我想要：

1. 过滤栏（所以用户可以先搜索一个子组，然后从中选择）


2. 否插入视图（全角，无圆角）


3. 一个位于右侧的复选框，用于指示该项目是否当前已选中


4. 复选框

1. a filter bar (so the user can first search for a subgroup of the items, and select among these)
2. no inset view (full width, no rounded corners)
3. a checkbox on right hand side which indicates whether the item is currently selected
4. full item surface activates the checkbox

这意味着将jQM缩略图列表视图的行为与过滤器（上面的第1点和第2点）字段集（点3和4）。

This means to combine the behavior of a jQM thumbnail listview with filter (points 1. and 2. above) and a checkbox fieldset (points 3. and 4.).

我的尝试迄今为止失败：
- checkfox字段集没有过滤器，总是插入
- listview不会显示一个jQM样式的复选框，即使< input> 和< label>

My attemps so far fail with: - a checkfox fieldset has no filter and is always inset - listview does not show a jQM-styled checkbox, even when an <input> and a <label> item is used (as far as I can tell)

任何帮助都是非常感谢。

Any help is appreciated.

使用jQuery Mobile 1.2.0

Using jQuery Mobile 1.2.0

推荐答案

查看此示例，并添加任何你想要的。

Look at this example and add whatever you want to it. This is not your full requirement but it can be build upon.

这是原创的 example 。

  <li data-icon="false">
     <div class="checkBoxLeft">
        <input type="checkbox" name="checkbox-0" id="checkbox-0"/>
     </div>
     <a href="#" class="detailListText"> Message 1 </a>
  </li>

现在很容易在li元素及其子复选框之间创建关联。

Now it is easy to create correlation between li element and its child checkbox.

要在与li元素交互时激活/停用chechbox，请使用以下代码：

To be able to activate/deactivate chechbox while interacting with li element us this code:

Long： / p>

Long:

$('li').bind('click', function(e) {
    if($(this).find('input[type="checkbox"]').is(':checked')) {
        $(this).find('input[type="checkbox"]').prop('checked', false)    
    }  else {
        $(this).find('input[type="checkbox"]').prop('checked', true)
    }
});

短：

$('li').bind('click', function(e) {
    $(this).find('input[type="checkbox"]').prop('checked', ($(this).find('input[type="checkbox"]').is(':checked')) ? false : true);    
});

这应该适用于jQuery版本1.6及以上版本。

This should work on jQuery version 1.6 and above.

如果您想要进一步了解如何自订jQuery Mobile网页和小工具，请参阅 文章 。它有很多工作示例，包括为什么是！jQuery Mobile的重要必要。

If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.

这篇关于jQuery Mobile：组合listview和checkbox字段集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！