JQuery Mobile: using “mark/unmark all” in a navbar for particular checkboxes within a collapsive div

Question

I'm new to js/jquery mobile, and I've been trying to create a complex example to improve my skills.

I have a JQM Accordion , grouping listviews with one checkbox per line on each "collapsible" div. What I want to do is use a dynamic Navbar to "Mark/Unmark" all checkboxes from the active listview. Example:

• User chooses a "group" (accordion "collapsible" div)
  • User checks any checkbox in the listview
    • The page displays a navbar with two options: "Mark All" / "Unmark All" (with obvious behavior). This must stay opened until there are any checkboxes marked in this group. If the user chooses to "Unmark" all of them, the navbar should be hidden.
      • If the user chooses another "group", the page must unchecked all checkboxes from the past group, and hide the navbar.

I've been able to create the whole thing after a lot of research, and this is what I came up with: http://jsfiddle.net/mauriciorcruz/2zgt8/ .

My issue is that the

$('#navbar-footer').show();
$('#navbar-footer').hide();  

stops working as expected after some checkbox clicks in different groups.

I've searched a lot for the answer, but it seems I'm not having enough skills to even understand the issue. My guess is that it's something related to how I'm implementing the handlers, as my implementation fully works while debugging .

Any help is appreciated.

Thank you!

Answer 1

the problem have something to do with the tapToggle of jquery-mobile you can fix it adding the data-tap-toggle="false" on the footer like this

<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="index-footer">

or in the $(document).ready like this

$("[data-role=footer]").fixedtoolbar({ tapToggle: false });    

the footer won't toggle on screen tap but it will work on your functions
http://jsfiddle.net/2zgt8/2/
if you want to keep the tapToggle you need to add e.stopPropagation() on your click handlers like this

$('#index-footer').on('click', '#mark-all', function(e) { 
    e.stopPropagation();
    //...
});     

http://jsfiddle.net/2zgt8/3/