Using jQuery to check all CheckBoxes in an iframe

In Dovetail Admin, there are a few pages where there is an option to check or uncheck a list of checkbox controls that are in an iframe. The Select All and Unselect All buttons perform the action, and using jQuery the codes becomes really simple and efficient.

The code that the buttons use is shared, and the true/false value is passed in to the function to check or uncheck the boxes.

The old code gets the iframe, gets all of the input fields, and then loops through all of the input fields. As it loops, if the field type is a checkbox, then the field’s checked attribute is set to the true/false value that was passed in.

Here is the original function:

function SetAllCheckBoxes(bOnOff) {
  var the_iframe= document.getElementById('priv_classes');
  var doc = the_iframe.contentWindow.document;

  all_fields = doc.getElementsByTagName("input");
  var element_count = all_fields.length;

  for(i = 0;i < element_count; i++) {
     objInput = all_fields[i];
     if (objInput.getAttribute('type') == 'checkbox') {
        objInput.checked=bOnOff;
     }
  }
}

Using jQuery, this code is reduced to one simple line:

$("#priv_classes").contents().find("input:checkbox").attr("checked", bOnOff);

jQuery selects the iframe by its id tag, and gets all of the checkbox input controls from the iframe content, and sets the checked attribute on each one.

Once again, jQuery makes javascript simple, accurate, and easy to maintain.