如何根据数据库中存储的内容在前端正确显示选中或未选中的复选框？

Question

我有一个包含一些问题/字段（电子邮件、电话号码等）的表单，然后用户可以选择是否应为会议存在的注册类型包含该字段，以及该字段是否应通过复选框对每个注册类型强制或不强制。

根据选中的复选框，将信息插入到具有以下结构的数据透视表“registration_type_questions”中：registration_type_id、question_id、必需。

数据库暂时是这样的：

registration_type_id  question_id  required
    2                   1          1    (include quetion 1 in rt02 and is mandatory)
    1                   2          1    (include quetion 2 in rt01 and is mandatory)
    1                   1          1    (include quetion 1 in rt01 and is mandatory)    

怀疑

我想根据数据库中的内容在前端显示选中或未选中的复选框。你知道如何根据这个 db 值检查前端的复选框吗？

使用该数据库信息，前端应如下所示：

表格：

<table class="table table-striped table-responsive-sm">
    <thead>
    <tr>
        <th scope="col">Questions</th>
        <th scope="col">Include for registration type</th>
        <th scope="col">Mandatory</th>
    </tr>
    </thead>
    <tbody>
    @foreach($question as $q)
        <tr>
            <td>{{$q->question}}</td>
            <td>
                @foreach($registration_types as $rtype)
                    <div class="form-check">
                        <input autocomplete="off" name="include[{{ $q->id }}][{{ $rtype->id }}]" class="form-check-input {{$rtype->name}}" type="checkbox" value="1" id="{{$rtype->id}}">
                        <label class="form-check-label" for="exampleRadios1">
                            {{$rtype->name}}
                        </label>
                    </div>

                @endforeach
            </td>
            <td>
                @foreach($registration_types as $rtype)
                    <div class="form-check">
                        <input autocomplete="off"  name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
                               class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="{{$rtype->id}}">
                        <label class="form-check-label" for="exampleRadios1">
                            for the registration type "{{$rtype->name}}"
                        </label>
                    </div>
                @endforeach
            </td>
        </tr>
    @endforeach

    </tbody>
</table>

问题模型

class Question extends Model
{

    public function registration_type(){
        return $this->belongsToMany('App\RegistrationType', 'registration_type_questions');
    }
}

注册类型模型

class RegistrationType extends Model
{
    public function conference(){
        return $this->belongsTo('App\Conference');
    }

    public function questions(){
        return $this->belongsToMany('App\Question', 'registration_type_questions');
    }
}

会议模型

class Conference extends Model
{
   // A conference has many registration types
    public function registrationTypes(){
        return $this->hasMany('App\RegistrationType', 'conference_id');
    }
}

Answer 1

根据 DB 值添加或删除 checked 属性。

@foreach($registration_types as $rtype)
  <div class="form-check">
      <input autocomplete="off"
             name="include[{{ $q->id }}][{{ $rtype->id }}]" 
             class="form-check-input {{$rtype->name}}" 
             type="checkbox" 
             id="{{$rtype->id}}"
             {{ array_search($rtype->id, $q->registration_type->pluck('id')->all()) !== FALSE
                ? 'checked' : '' }}>
      <label class="form-check-label" for="exampleRadios1">
        {{$rtype->name}}
      </label>
  </div>
@endforeach

出于性能考虑，您可能已经从控制器准备了$q->registration_type->pluck('id')->toArray()，因此您不必为每种注册类型运行这些函数。

Answer 2

您需要在表单中添加：

<input autocomplete="off"  
       name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
       class="form-check-input mandatorycheckbox" 
       type="checkbox" 
       value="1" 
       id="{{$rtype->id}}"
       {{$rtype->required==1?" checked":""}}>

您意识到未勾选的单选框/复选框不会随表单一起提交。这意味着您需要先检查它们是否存在 (isset)。

我注意到的另一个问题。在您给出的数据示例中，当您更新 registration_type_id of 1 时，它将更新哪个记录（此代码可能在其他地方未提供）。

Answer 3

在您的控制器中将关系值存储到变量并将其传递给视图。

foreach($question as $ques) {
    foreach($ques->registration_type as $regType) {
        $optional[$ques->id][$regType->id] = 1;

        if($regType->pivot->required == 1) {
            $required[$ques->id][$regType->id] = 1;
        }
    }
}

将$optional 和required 传递给视图。与$question。

在您的视图中检查当前复选框是否在变量中定义了关系，然后将复选框属性设置为“checked”。

@foreach($question as $q)
    <tr>
        <td>{{$q->question}}</td>
        <td>
            @foreach($registration_types as $rtype)
                <div class="form-check">
                    <input autocomplete="off" name="include[{{ $q->id }}][{{ $rtype->id }}]" 
                        class="form-check-input {{$rtype->name}}" type="checkbox" value="1" id="{{$rtype->id}}" {{ !empty($optional[$q->id][$rtype->id]) ? "checked" : "" }}>
                    <label class="form-check-label" for="exampleRadios1">
                        {{$rtype->name}}
                    </label>
                </div>
            @endforeach
        </td>
        <td>
            @foreach($registration_types as $rtype)
                <div class="form-check">
                    <input autocomplete="off"  name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
                       class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="{{$rtype->id}}" {{ !empty($required[$q->id][$rtype->id]) ? "checked" : "" }}>
                    <label class="form-check-label" for="exampleRadios1">for the registration type "{{$rtype->name}}"</label>
                </div>
            @endforeach
        </td>
    </tr>
@endforeach