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