Mini Tutorial: Using Check-boxes for Customer Attributes

Working on a clients theme recently, I ran into an issue when the design called for the use of check-boxes for some custom customer attributes. Unfortunately Magento doesn’t offer this as an option when creating customer attributes but instead uses Multiselect’s which for in effect are used the same way. With that in mind I came up with a relatively simple solution which uses Prototype and only requires changing one template file.

1. Copy the file:

app/design/frontend/enterprise/default/template/customer/form/renderer/multiselect.phtml
to
app/design/frontend/enterprise/YOUR_THEME/template/customer/form/renderer/multiselect.phtml

2. Replace the content with:

<label for="<?php echo $this->getHtmlId()?>"<?php if ($this->isRequired()) echo ' class="required"' ?>>
     <?php if ($this->isRequired()) echo '<em>*</em>' ?><?php echo $this->getLabel() ?>
</label>
<div class="clearer"></div>
<div class="input-box">
    <div class="no-display">
        <select multiple="multiple" id="<?php echo $this->getHtmlId()?>"
                name="<?php echo $this->getFieldName('')?>"<?php if ($this->getHtmlClass()): ?>
                class="<?php echo $this->getHtmlClass();?>"<?php endif;?>>
            <?php foreach ($this->getOptions() as $option): ?>
            <?php if ($option['value']): ?>
                <option value="<?php echo $option['value']?>"<?php if ($this->isValueSelected($option['value'])): ?>
                        selected="selected"<?php endif;?>><?php echo $this->htmlEscape($option['label'])?></option>
                <?php endif; ?>
            <?php endforeach;?>
        </select>
    </div>
    <?php $i = -1; foreach ($this->getOptions() as $option): ?>
    <?php if ($i != -1): ?>
        <div class="clearer"></div>
        <div class="left">
            <label
                for="<?php echo $this->htmlEscape($option['label'])?>"<?php if ($this->isRequired()) echo ' class="required"' ?>>
                <?php if ($this->isRequired()) echo '<em>*</em>' ?><?php echo $this->htmlEscape($option['label'])?>
            </label>
            <input
                id="<?php echo $this->htmlEscape($option['label'])?>" <?php if ($this->isValueSelected($option['value'])): ?>
                checked="checked"<?php endif;?>class="checkbox"
                type="checkbox" <?php if ($this->isValueSelected($option['value'])): ?>
                selected="selected"<?php endif;?>
                onclick="var options<?php echo $i ?> = $$('select#<?php echo $this->getHtmlId()?> option');
                         if(options<?php echo $i ?>[<?php echo $i ?>].selected == true)
                            options<?php echo $i ?>[<?php echo $i ?>].selected = false;
                         else options<?php echo $i ?>[<?php echo $i ?>].selected=true;"
                autocomplete="off"/>
        </div>
        <?php endif; ?>
    <?php $i++ ?>
    <?php endforeach;?>
    <?php if ($_message = $this->getAdditionalDescription()) : ?>
    <div class="validation-advice"><?php echo $_message; ?></div>
    <?php endif; ?>
</div>