1

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

Improve this question
0

3 Answers 3

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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 like so?: jsfiddle.net/8dyn9e7s/5
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.
0

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

Improve this answer

Comments

0

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.

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.