Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Book Image

Learning jQuery : Better Interaction Design and Web Development with Simple JavaScript Techniques

Overview of this book

Table of Contents (18 chapters)
Learning jQuery
Credits
About the Authors
About the Reviewers
Preface

Checkbox Manipulation


To round out our enhancements to the contact form, we’ll help the user manage the list of checkboxes in the Miscellaneous section. A group of 10 checkboxes can be daunting, especially if the user wishes to click most or all of them, as seen with the following group of ways the user may have discovered us:

An option to check or uncheck all of the checkboxes would certainly come in handy in this type of situation. So, let’s create one.

To begin, we create a new <li> element, fill it with a <label>, inside which we place <input type="checkbox" id="discover-all"> and some text, and prepend it all to the <ul> element inside <li class="discover">:

$(document).ready(function() {
  $('<li></li>')
  .html('<label><input type="checkbox" id="discover-all" />'
                                       + '<em>check all</em></label>')
  .prependTo('li.discover > ul');
});

Now we have a new checkbox with a label...