javascript - jQuery Mobile的导航栏按钮上的选择复选框单击

This question already has answers here:

How to check “checkbox” dynamically - jQuery Mobile
                                
                                    （3个答案）
                                
                        
                                5年前关闭。
            
                    
我正在尝试在导航栏中放置类似控件的复选框，其行为应类似于切换。当我第一次选择导航栏按钮时，它应该选择下面的所有复选框，再次单击将重置该复选框。

这是我要显示控件的代码

<div data-role="page" id="index">
  <div data-role="header" data-position="fixed" >
    <div data-role="navbar">
      <ul><li><a href='' data-icon="check">All</a></li></ul>
    </div>
  </div>
  <div data-role="content" id="content">
    <ul data-role="listview" data-theme="c" data-dividertheme="d">
        <li>
            <div class="checkBoxLeft">
                <input type="checkbox" name="checkbox-0" id="checkbox-0"/>
            </div>
            <a href="#" class="msg">Message 1 </a>
        </li>
        <li>
            <div class="checkBoxLeft">
                <input type="checkbox" name="checkbox-1" id="checkbox-1"/>
            </div>
            <a href="#" class="msg">Message 2 </a>
        </li>
    </ul>
  </div>
</div>

JSfiddle链接为http://jsfiddle.net/8dyn9e7s/

如何在单击按钮时选择所有复选框，然后在再次单击时取消选择所有复选框。

问候
马来

最佳答案

您可以侦听click事件中的任何元素，在本例中为“全部”复选框，然后选中所有复选框并使用.prop()设置选中的属性。这是更新的小提琴，显示了支票的切换。 http://jsfiddle.net/8dyn9e7s/1/

编辑：我建议给您的链接一个唯一的类或ID，以便它不必仅监听ui-click类。另外，您可能希望处理没有任何复选框的情况，否则条件检查将不起作用，并且最好将一个复选框也定义为一个类的范围，这样您就不必像例