How to wrap / manipulate element outputs on a form's checkboxes html?

Question

I have the following form that contains a big list of checkboxes. The first checkbox is the parent of the children below it. In my case it is called "Africa" and the ones below it are "Africa-child" checkboxes. I was able to manipulate the classes, but I can't seem to find a way to add a wrapper div around the "Africa-child" elements. I mean I can do it via javascript, but I was wondering if there was a Drupal hook to add in extra html to the select options html before it gets outputted.

The code below is it form data used to build the form. The prefix and suffix is wrapping ALL of the checkboxes, but I only want to wrap certain ones.

function hotsite_filters() {

  $form['offices'] = array(
    '#type'       =>  'checkboxes',
    '#title'      =>  '',
    '#options'      =>  get_office_options(true, '', 'local_alias ASC', false, true, true, false, true),
    '#default_value'  =>  filter_get_keys('browse-offices'),
    '#prefix'     =>  '<div id="filters-offices"><div class="filter-header">' . variable_get_value('hotsite_filter_offices_header') . '</div>',
    '#suffix'     =>  '</div>',
    '#size'       =>  11,
    '#multiple'     =>  true,
    '#required'     =>  false,
  );

Answer 1

You could use your get_office_options function and add some html

For example:

$alphas = range('A', 'Z');
    foreach($w_question->get('field_option_radio') as $key => $option){
        $options[$option_id] = '<i></i>'.$option_text;
    }

    return $options;