Jquery Mobile Select check boxes on navbar button click

Question

I am trying to put a checkbox like control in the Navbar which should behave like a toggle. When I first select the navbar button it should select all the checkboxes below and clicking again will reset the checkbox.

Here is the code I have to display the controls

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

The JSfiddle link is http://jsfiddle.net/8dyn9e7s/

How do I select all checkboxes on the click on the button and deselect all checkboxes on an another click.

Regards Malai

score 2 · Answer 1 · answered Nov 01 '14 at 23:05

2

You can solve this in three lines of jQuery:

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

All you need to do is add an id to your toggle button as seen here: http://jsfiddle.net/8dyn9e7s/3/

answered Nov 01 '14 at 23:05

k-nut

3,447
2
18
28

Nice use of setting the value as the opposite of the current, very concise. i would recommend caching the jQuery lookup though so you don't have to get it twice – Lbatson Nov 01 '14 at 23:07
@Lbatson like so?: http://jsfiddle.net/8dyn9e7s/5/ – k-nut Nov 01 '14 at 23:09
yep. nice solution. oh, just noticed though, you'll want to put a var in front otherwise that's global but yea that's the drift. – Lbatson Nov 01 '14 at 23:10

score 0 · Accepted Answer · answered Nov 01 '14 at 23:03

You can listen to the click event for whatever element, in this case your All checkbutton, and then select all the checkboxes and set the checked property using .prop(). Here's an updated fiddle showing the checks toggling on and off. http://jsfiddle.net/8dyn9e7s/1/

Edit: I would suggest giving your link a unique class to listen for, or an id, so it doesn't have to listen to just the ui-click class. Also you may want to handle a case where you don't have any checkboxes otherwise the condition check won't work and it would be better to scope your checkboxes with a class as well so you don't just grab all of them like the example

score 0 · Answer 3 · answered Nov 01 '14 at 23:06

And one more version:

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

Important part here is that you also need to take care of removing active class from the navigation button when in unchecked state.

Jquery Mobile Select check boxes on navbar button click

3 Answers3

Demo: http://jsfiddle.net/8dyn9e7s/4/