how to work with checkboxlist ?

Yii 2.0 General Discussions
1

I tried Yii2 documentation for checkboxlist , google around, check stackoverflow, check forum and cant find the answer for my problem.

I want to have the checkbox list vertically aligned or spread out nicely on the horizontal.

Also, I want to add "Select All | De-select All" to the right of the "label" to turn on/off all checkboxes.

Please see screenshot.

My code is





<?php


use yii\helpers\Html;

use yii\widgets\ActiveForm;

use yii\helpers\ArrayHelper;

/* @var $this yii\web\View */

/* @var $model app\models\WorkOrder */

/* @var $form yii\widgets\ActiveForm */

$books = ArrayHelper::map(\app\models\Book::find()->all(), 'id', 'book_code');

?>


<div class="work-order-form">


    <?php $form = ActiveForm::begin(); ?>


    <?= $form->field($model, 'description')->textInput(['maxlength' => true]) ?>


    <?= $form->field($model, 'books')->checkboxList($books) ?>

    

    <div class="form-group">

        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

    </div>


    <?php ActiveForm::end(); ?>


</div>

Updated: 





    <?= $form->field($model, 'books')->checkboxList($books,[

        'itemOptions' => [

            'labelOptions' => ['class' => 'col-md-1']

        ]

    ]) ?>

I tried setting labelOptions but the UI is skewed

2

There are a few ways to do this; I’m going to post two of them. Both of them require jQuery for the checking and unchecking. The first way shows full control over the items and the second is a simpler way for the same outcome; but less control.

Note: By default both will be vertical layout. You can override the separator option in the first one or change the class in the second to make it a horizontal layout.

First Way (Most Control Over Items using Item Option Callback):




<?= $form->field($model, 'book')->checkboxList($books, [

'item' => function($index, $label, $name, $checked, $value) {

echo "<div 'class'='col-sm-12'><label><input tabindex='{$index}' class='book' type='checkbox' {$checked}'name='{$name}'value='{$value}'> {$label}</label></div>";

}])->label('Books <label><input type="checkbox" id="checkAll">Check All</label>');

Second Way (Less Control Over Items):


     	

<?= $form->field($model, 'book')->checkboxList($books, [

  'separator' => '<br>',

  'itemOptions' => [

  'class' => 'book'

 ]

 ])->label('Books <label><input type="checkbox" id="checkAll">Check All</label>');

?>

Both require the following jQuery to work (it’s just a shorthand if/else you can break it apart for readability).




<?php   $this->registerJs("jQuery('#checkAll').change(function(){jQuery('.book').prop('checked',this.checked?'checked':'');})");?>
3

I follow your First Way but the UI does not fit correctly. I think it is a bug ?





    <?= $form->field($model, 'books')->checkboxList($books,[

        'item' => function($index, $label, $name, $checked, $value) {

        echo "<div class='col-sm-12'><label><input tabindex='{$index}' class='book' type='checkbox' {$checked} name='{$name}' value='{$value}'> {$label}</label></div>";

        }])->label('Books <a id="selectAll" style="margin-left:15px">Select All</a> | <a id="deselectAll">De-select All</a>'); ?>

The generated htmls are rendered outside the checkboxlist label

please see screenshot 6728

item-callable.png

4

I have this code in my form

<?= $form->field($model, ‘checklist’)->checkboxList($list) ?>

And it appears in an horizotal way for default… do you guys know how can I see the checkboxlist in an vertical way?

Hope you can help me. Thanks

5

In skworden’s response there should be return, but not echo inside of an ‘item’ function.