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()在会话中存储值，因此它可以像上一次会话一样存储单选框的值在同一页面上，我已经回答了有关使用此方法处理数据的问题，请检查是否可以将其应用于所需的内容：

Passing Data to Another Component OnClick

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

Answer 2

您可以像这样添加选中的属性：

 'item' => function($index, $label, $name, $checked, $value) {
       if ($checked) {
          $checkedText = 'checked="checked"';
       } else {
              $checkedText = '';
       }
      $return = '<label>';
      $return .= '<input type="radio" name="' . $name . '" value="' . $value . '" tabindex="3" '.$checkedText.'>';
      $return .= '<span class="'.$value.'">' . ucwords($label) . '</span>';
      $return .= '</label>';

     return $return;
   }
]

根据数据库中的值更改CSS

2 个答案: