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

Jquery Mobile Select check boxes on navbar button click

本文关键字：复选框 按钮 Mobile 单击 导航 Jquery      更新时间：2023-09-26

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

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

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

如何在单击按钮时选择所有复选框，并在另一次单击时取消选择所有复选复选框。

问候Malai

您可以在jQuery的三行中解决此问题：

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

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

您可以监听任何元素的点击事件，在本例中是All复选按钮，然后选择所有复选框并使用.prop()设置选中的属性。这是一个更新的小提琴，显示了支票的开关。http://jsfiddle.net/8dyn9e7s/1/

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

还有一个版本：

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

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

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

相关文章：