css - 根据数据库中的值更改 css

Question

我的表单中有几个单选按钮，我已经如下更改了 css 样式。表单域

<div class="form-inline boxradio">

                            <?php 
                                if((Yii::$app->user->can('s_newworkop') && $model->wp_status == 'Submitted') || (Yii::$app->user->can('s_newworkop') && Yii::$app->user->can('s_newworkem') && $model->wp_status == 'Assigned')){

                                    echo $form->field($model, 'wp_spost21')->radioList(
                                        ['Yes'=>'Yes','No'=>'No','NA'=>'NA'],
                                        [
                                        'item' => function($index, $label, $name, $checked, $value) {

                                                $return = '<label>';
                                                $return .= '<input type="radio" name="' . $name . '" value="' . $value . '" tabindex="3">';

                                                $return .= '<span class="'.$value.'">' . ucwords($label) . '</span>';
                                                $return .= '</label>';

                                                return $return;
                                            }
                                        ]
                                        )

                                    ->label(false);
                                }else{
                                    if($model->wp_spost21 == 'Yes'){
                                        echo Html::img((\Yii::$app->params['statusimagepath']).'yes32.png');
                                    }
                                    elseif($model->wp_spost21 == 'No'){
                                        echo Html::img((\Yii::$app->params['statusimagepath']).'no32.png');
                                    }
                                    elseif($model->wp_spost21 == 'NA'){
                                        echo Html::img((\Yii::$app->params['statusimagepath']).'na32.png');
                                    }
                                }
                            ?>
                        </div>

CSS

.boxradio label input
{
  display:none;
}

.boxradio label span
{
  position:relative;
  display: inline-block;
  margin: 2px 2px;
  padding: 2px;
  width: 35px;
  background: #ffffff;
  border: 1px solid black;
  border-radius: 4px;
}

.boxradio label input:checked + span 
{
  border: 1px solid #008eff;
}

.boxradio label input:checked + span:before
{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: #008eff;
  z-index: -1;
  filter: blur(5px);
}

.boxradio label input:checked + span:after
{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: #008eff;
  z-index: -1;
  filter: blur(7px);
}

.boxradio label input:checked + span.Yes
{
  color: #00802b;
  border-color: #00802b;
  box-shadow: inset 0 0 2px #00802b;
}

.boxradio label input:checked + span.Yes:before,
.boxradio label input:checked + span.Yes:after
{
  background: #00802b;
}

.boxrdio label input[value="Yes"] + span {
  color: #00802b;
  border-color: #00802b;
  box-shadow: inset 0 0 2px #00802b;
}

.boxradio label input:checked + span.No
{
  color: #992600;
  border-color: #992600;
  box-shadow: inset 0 0 2px #992600;
}

.boxradio label input:checked + span.No:before,
.boxradio label input:checked + span.No:after
{
  background: #992600;
}

.boxradio label input:checked + span.NA
{
  color: #5F5858;
  border-color: #5F5858;
  box-shadow: inset 0 0 2px #5F5858;
}

.boxradio label input:checked + span.NA:before,
.boxradio label input:checked + span.NA:after
{
  background: #5F5858;
}

这在我第一次提交表单时效果很好。当我单击任何按钮时，单选按钮 css 会发生变化。但是在更新的情况下，当表单打开时，我无法理解我在提交时检查了哪个单选按钮。我需要根据数据库中的数据更改按钮的 css。

当前的更新表单看起来像 -

我想默认看起来像

请帮忙。

Answer 1

那么这与 CSS 无关，您可以使用 HTML5 和 JavaScript 使用 sessionStorage.getItem() 和 sessionStorage.setItem() 将值存储在 session 中，所以它会像同一页面的最后一个 session 一样存储单选框的值，我已经回答了一个关于使用这种方法处理数据的问题，检查一下你是否可以将它应用到你需要的地方:

---

Passing Data to Another Component OnClick

---

请注意，提交表单后，通常会发送您的数据并清除表单，因此所有元素都会恢复到原始状态。