nguyendh
(Duynguyen0511)
September 29, 2015, 11:49pm
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
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':'');})");?>
nguyendh
(Duynguyen0511)
September 30, 2015, 3:51pm
3
skworden:
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':'');})");?>
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
cesar.yii
(Cesarfpmx)
April 12, 2016, 2:43am
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
kinos
(Alex)
January 31, 2020, 7:21am
5
In skworden ’s response there should be return, but not echo inside of an ‘item’ function.