checkbox styling and making it checked

问题

1. The checkbox retrieved from database is so long that it is going downwards, is there any way to make it as four layers
2. when clicked on "all fields" checkbox all checkbox must be checked.

How this to be done?
My code :-

 protected function getConfigForm()
    {         
        $sql = 'SELECT id_order_state,name  FROM '._DB_PREFIX_.'order_state_lang';
        $results = Db::getInstance()->ExecuteS($sql);

        $values_query = array(array(
            'id' => 'AllFields',
            'name' => $this->l('All Fields'),
            'val' => 'All',
        ));
        foreach ($results as $row) {
            $values_query[] = array(
                'id' => 'OrderID',
                'name' => $this->l($row['name']),
                'val' => $row['id_order_state'],
                'required' => true,
            );
        }

        return array(
            'form' => array(
                'legend' => array(
                    'title' => $this->l('Settings'),
                    'icon' => 'icon-cogs',
                ),
                'input' => array(                   
                    array(
                        'type' => 'checkbox',
                        'label' => $this->l('Select Required Status'),
                        'required' => true,
                        'values' => array(
                            'query' => $values_query,
                            'id' => 'id',
                            'name' => 'name'
                        ),
                    ),
                ),
                'submit' => array(
                    'title' => $this->l('Save'),
                ),
            ),
        );
    }

回答1:

Admin forms are rendered using /adminXXX/themes/default/template/helpers/form/form.tpl template file.

In classes /classes/helper/Helper.php there's a method createTemplate():

public function createTemplate($tpl_name)
{
    if ($this->override_folder) {
        if ($this->context->controller instanceof ModuleAdminController) {
            $override_tpl_path = $this->context->controller->getTemplatePath().$this->override_folder.$this->base_folder.$tpl_name;
        } elseif ($this->module) {
            $override_tpl_path = _PS_MODULE_DIR_.$this->module->name.'/views/templates/admin/_configure/'.$this->override_folder.$this->base_folder.$tpl_name;
        } else {
            if (file_exists($this->context->smarty->getTemplateDir(1).$this->override_folder.$this->base_folder.$tpl_name)) {
                $override_tpl_path = $this->context->smarty->getTemplateDir(1).$this->override_folder.$this->base_folder.$tpl_name;
            } elseif (file_exists($this->context->smarty->getTemplateDir(0).'controllers'.DIRECTORY_SEPARATOR.$this->override_folder.$this->base_folder.$tpl_name)) {
                $override_tpl_path = $this->context->smarty->getTemplateDir(0).'controllers'.DIRECTORY_SEPARATOR.$this->override_folder.$this->base_folder.$tpl_name;
            }
        }
    } elseif ($this->module) {
        $override_tpl_path = _PS_MODULE_DIR_.$this->module->name.'/views/templates/admin/_configure/'.$this->base_folder.$tpl_name;
    }

    if (isset($override_tpl_path) && file_exists($override_tpl_path)) {
        return $this->context->smarty->createTemplate($override_tpl_path, $this->context->smarty);
    } else {
        return $this->context->smarty->createTemplate($this->base_folder.$tpl_name, $this->context->smarty);
    }
}

As you can see in this method, you have the possibility to override a default admin template inside your module by creating this file /modules/my_module/views/templates/admin/_configure/helpers/form/form.tpl:

{extends file="helpers/form/form.tpl"}
{block name="input"}
    {if $input.type == 'checkbox'}
        {if isset($input.expand)}
            <a class="btn btn-default show_checkbox{if strtolower($input.expand.default) == 'hide'} hidden{/if}" href="#">
                <i class="icon-{$input.expand.show.icon}"></i>
                {$input.expand.show.text}
                {if isset($input.expand.print_total) && $input.expand.print_total > 0}
                    <span class="badge">{$input.expand.print_total}</span>
                {/if}
            </a>
            <a class="btn btn-default hide_checkbox{if strtolower($input.expand.default) == 'show'} hidden{/if}" href="#">
                <i class="icon-{$input.expand.hide.icon}"></i>
                {$input.expand.hide.text}
                {if isset($input.expand.print_total) && $input.expand.print_total > 0}
                    <span class="badge">{$input.expand.print_total}</span>
                {/if}
            </a>
        {/if}

        {* HERE WE DEFINE A CHECKBOX CHECK_ALL *}
        <input type="checkbox" id="check_all" name="check_all" data-name="{$input.name}" value="1" />

        {foreach $input.values.query as $value}
            {assign var=id_checkbox value=$input.name|cat:'_'|cat:$value[$input.values.id]}

            {* HERE YOU CAN REARRANGE THE CHECKBOXES AS YOU WANT *}
            <div class="checkbox{if isset($input.expand) && strtolower($input.expand.default) == 'show'} hidden{/if}">
                {strip}
                    <label for="{$id_checkbox}">
                        <input type="checkbox" name="{$id_checkbox}" id="{$id_checkbox}" class="{if isset($input.class)}{$input.class}{/if}"{if isset($value.val)} value="{$value.val|escape:'html':'UTF-8'}"{/if}{if isset($fields_value[$id_checkbox]) && $fields_value[$id_checkbox]} checked="checked"{/if} />
                        {$value[$input.values.name]}
                    </label>
                {/strip}
            </div>
        {/foreach}
    {else}
        {$smarty.block.parent}
    {/if}
{/block}

{* HERE WE DEFINE THE JAVASCRIPT THAT WILL ANIMATE THE CHECK ALL CHECKBOX *}
<script type="text/javascript">
    $("#check_all").on('change', function() {
        $("input[name=" + $(this).data('name') + "]").prop('checked', true);
        $(this).prop('checked', false);
    });
</script>

This template will be used for every admin controller defined in your module.

I didn't test this code, you'll have to adapt it to your needs but the overall concept is here.

来源：https://stackoverflow.com/questions/42407106/checkbox-styling-and-making-it-checked