Javascript Jquery Mobile选择导航栏按钮上的复选框单击

我试图在导航栏中放置一个类似复选框的控件，它的行为应该类似于切换。当我第一次选择导航栏按钮时，它应该选中下面的所有复选框，再次单击将重置复选框

这是我必须显示控件的代码

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

jsiddle链接是

如何在单击按钮时选中所有复选框，并在再次单击时取消选中所有复选框

问候

---

Malai

您可以监听任何元素的单击事件，在本例中为您的All checkbutton，然后选择所有复选框并使用

.prop（）

设置checked属性。这是一个更新的小提琴，显示支票的开关

---

编辑：我建议给你的链接一个唯一的类来监听，或者一个id，这样它就不必只监听ui点击类。此外，您可能希望处理没有任何复选框的情况，否则条件检查将不起作用，最好也使用一个类来限定复选框的范围，这样您就不会像示例中那样只获取所有复选框，您可以通过jQuery的三行来解决这一问题：

$("#checkAll").on("click", function(){
    $("input").prop("checked", !$("input").prop("checked"));
});

您只需向切换按钮添加一个id，如下所示：

还有一个版本：

$('.ui-navbar .ui-btn').click(function(e) {
    $('#content :checkbox').prop('checked', $(this).toggleClass('ui-btn-active').hasClass('ui-btn-active'));
    e.stopPropagation();
    e.preventDefault();
});

这里重要的一点是，当处于未选中状态时，您还需要注意从导航按钮中删除活动类

---

演示：很好地将值设置为当前值的对立面，非常简洁。不过我建议缓存jQuery查找，这样您就不必获取它了twice@Lbatson喜欢吗？：是的。很好的解决方案。哦，刚刚注意到，你会想在前面放一个var，否则这是全局的，但这是漂移。