Javascript 复选框设置样式并使其处于选中状态 从数据库中检索到的复选框太长，以至于它向下移动，有没有办法将其设置为四层 单击“所有字段”复选框时，必须选中所有复选框

如何做到这一点？
我的代码：-

 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'),
                ),
            ),
        );
    }

---

管理员表单使用

/adminXXX/themes/default/template/helpers/form/form.tpl

模板文件呈现

在classes

/classes/helper/helper.php

中有一个方法

createTemplate（）

：

正如您在该方法中看到的，您可以通过创建以下文件来覆盖模块内的默认管理模板：

/modules/my\u module/views/templates/admin/\u 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>

{extends file=“helpers/form/form.tpl”}
{block name=“input”}
{如果$input.type=='checkbox'}
{if isset（$input.expand）}
{/if}
{*这里我们定义了一个复选框CHECK_ALL*}
{foreach$input.values.query as$value}
{assign var=id_checkbox value=$input.name | cat:''| cat:$value[$input.values.id]}
{*在这里，您可以根据需要重新排列复选框*}
{strip}
{$value[$input.values.name]}
{/strip}
{/foreach}
{else}
{$smarty.block.parent}
{/if}
{/block}
{*在这里，我们定义了一个JAVASCRIPT，它将设置复选框的动画*}
$（“#全部检查”）。在（'change'，function（）上{
$（“输入[name=“+$（this）.data（'name'）+“]）”）.prop（'checked'，true））；
$（this.prop（'checked'，false）；
});

此模板将用于模块中定义的每个管理员控制器

---

我没有测试这段代码，您必须根据需要调整它，但总体概念在这里。

我希望它出现在配置页面，而不是管理控制器页面。模块配置页是一个管理控制器，所以它应该可以工作。

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