Question

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

以下是我必须显示控件的代码

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

如何选中按钮上的所有复选框，并在另一次点击时取消选中所有复选框。

此致梅莱

Answer 1

你可以用三行jQuery来解决这个问题：

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

您需要做的就是在切换按钮上添加一个ID，如下所示： http://jsfiddle.net/8dyn9e7s/3/

Answer 2

您可以监听任何元素的click事件，在本例中是All checkbutton，然后选中所有复选框并使用.prop()设置checked属性。这是一个更新的小提示，显示支票切换打开和关闭。 http://jsfiddle.net/8dyn9e7s/1/

编辑：我建议给你的链接一个独特的类来监听，或者一个id，所以它不必只听ui-click类。此外，你可能想要处理一个你没有任何复选框的情况，否则条件检查将不起作用，最好将你的复选框与一个类的范围进行对齐，这样你就不要只抓住所有这些复选框。示例

Answer 3

还有一个版本：

$('.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 Mobile选择导航栏按钮上的复选框单击

3 个答案:

演示：http://jsfiddle.net/8dyn9e7s/4/