Javascript jquerymobile：使用；标记/取消标记全部”；在导航栏中显示折叠div中的特定复选框

我是js/jquery mobile新手，我一直在尝试创建一个复杂的示例来提高我的技能

我有一个JQM，在每个“可折叠”div上对listview进行分组，每行一个复选框。我要做的是使用动态导航栏来“标记/取消标记”活动listview中的所有复选框。例如：

• 用户选择“组”（手风琴“可折叠”div）
  • 用户选中listview中的任何复选框
    • 该页面显示一个导航栏，其中包含两个选项：“全部标记”/“全部取消标记”（具有明显的行为）。在该组中标记任何复选框之前，必须保持打开状态。如果用户选择“取消标记”所有导航栏，则导航栏应隐藏。
      • 如果用户选择另一个“组”，则页面必须取消选中过去组中的所有复选框，并隐藏导航栏

经过大量的研究，我已经能够创造出整个东西，这就是我所想到的：

我的问题是

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

在不同组中单击某些复选框后，将按预期停止工作

我已经寻找了很多答案，但似乎我没有足够的技能来理解这个问题。我的猜测是，这与我如何实现处理程序有关，因为我的实现在调试时完全工作

感谢您的帮助

---

谢谢大家!

这个问题与jquery mobile的功能有关。您可以通过在页脚上添加数据点击toggle=“false”来修复它，如下所示

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

页脚不会在屏幕点击时切换，但会在您的功能上工作

如果要保留tapToggle，需要在单击处理程序中添加e.stopPropagation（），如下所示

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

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

---

因为您使用的是

.ready（）

另外，我建议使用

.class{display:none；}

而不是

.show（）

和

隐藏（）。你搞定了！非常感谢！