I have a GridView displaying employee payslips, and beside each of their names are check boxes. Refer to the picture below:

As you can see, I also have a drop-down list. I set it in my jQuery to select the last child of the list which is my case, the April 10, 2015 - April 16, 2015 option. On page load, I can see this page (photo above) with those check boxes. I had a problem with the check boxes since when I click the header check box, it should select all of the check boxes below it. But it's not. Now, when I tried selecting another option in the drop-down list, here's what I get:

The style of the check boxes changes. And now, when I check the header check box, it's already working, selecting every check boxes below.

Here's how I display the drop-down list:

echo Select2::widget([ 'name' => 'period', 'data' => $period, 'options' => [ 'placeholder' => 'Select period', 'id' => 'period', 'style' => 'width: 400px; height: 34px;' ], 'pluginOptions' => [ 'maximumInputLength' => 10, ], ]);

GridView:

<?php \yii\widgets\Pjax::begin(['id' => 'employee']); ?> <?php echo GridView::widget([ 'dataProvider' => $dataProvider, //'filterModel' => $searchModel, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], ['class' => 'yii\grid\CheckboxColumn', 'options' => ['class' => 'icheckbox_minimal',] ], 'fname', 'lname', 'totalEarnings', 'totalDeductions', 'netPay', [ 'label' => 'Action', 'content' => function ($model, $key, $index, $column) { if ($model->netPay != null) { return Html::a('View Payslip', ['view' , 'id' => $model->payslipID], ['class' => 'btn btn-success']); }else{ return Html::a('Create Payslip', ['create-new', 'id' => $model->user_id], ['class' => 'btn btn-warning']); } } ] ], ]); ?> <?php \yii\widgets\Pjax::end(); ?>

Script:

<script> $(document).ready(function(){ $("#period option:last-child").attr('selected', 'selected'); $("#period").change( function() { var period = $('#period').val(); if(period != 0){ $.ajax({ url: 'index.php?r=payslip/periods', dataType: 'json', method: 'GET', data: {id: period}, success: function (data, textStatus, jqXHR) { $.pjax.reload({container:'#employee'}); //alert(data.start); }, error: function (jqXHR, textStatus, errorThrown) { console.log('An error occured!'); alert('Error in ajax request'); } }); } } ); }) </script>

My question is, how do I preserve/maintain the style of the check boxes? And why does it change in style? And why are the styled check boxes not working?