Yii2 复选框更改样式答案

【问题标题】：Yii2 Checkbox Changes StyleYii2 复选框更改样式
【发布时间】：2015-04-16 14:04:37
【问题描述】：

我有一个 GridView 显示员工工资单，每个人的姓名旁边都有复选框。参考下图：

如您所见，我还有一个下拉列表。我在我的 jQuery 中设置它以选择列表的最后一个子项，即 2015 年 4 月 10 日 - 2015 年 4 月 16 日 选项。在页面加载时，我可以看到带有这些复选框的此页面（上图）。我的复选框有问题，因为当我单击标题复选框时，它应该选中它下面的所有复选框。但事实并非如此。现在，当我尝试在下拉列表中选择另一个选项时，我得到的结果如下：

复选框的样式发生变化。现在，当我选中标题复选框时，它已经开始工作了，选中了下面的每个复选框。

下拉列表的显示方式如下：

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>
$(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>

我的问题是，如何保留/维护复选框的样式？为什么它会改变风格？为什么样式复选框不起作用？

【问题讨论】：

标签： javascript jquery css checkbox yii2

【解决方案1】：

您的复选框已使用 javascript 更改为如下所示。
您有 2 个问题：
1）你的“检查所有”功能工作得很好，你只需要在之后刷新复选框的状态。它的工作原理是这样的：当您单击替换复选框的 div 时，它下面的复选框就会更改。你的问题是你用脚本检查它，所以你需要触发它上面的 div 来改变。 2) 因为你使用 pjax 你的页面 DOM 被改变了。但是，因为您可能更改了页面“onload”上的复选框，所以新的复选框仍然没有样式。您需要在 pjax 调用后再次运行更改它们的函数。

【讨论】：