jQuery Mobile: combine listview and checkbox fieldset

问题

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

I want:

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

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.).

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.

Using jQuery Mobile 1.2.0

回答1:

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

This is original 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>

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

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

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)
    }
});

Short:

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

This should work on jQuery version 1.6 and above.

Final notes

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.

来源：https://stackoverflow.com/questions/13563679/jquery-mobile-combine-listview-and-checkbox-fieldset