用于切换复选框的 Javascript - Laravel答案

【问题标题】：Javascript for toggle checkbox - Laravel用于切换复选框的 Javascript - Laravel
【发布时间】：2020-02-24 18:24:26
【问题描述】：

大家好，我是 Laravel 和编程的新手，我试图让复选框检查 $status 的值是否为 1，在我的场景中，{{$detail->status}} 的值应该是1 所以复选框应该被选中，但它不起作用。

Javascript

<script>
function sta() {
  var st = document.getElementById("status").value;
  var checkbox = document.getElementById("status");

  if (st == 1) {
        checkbox.checked == true;
  } else {
        checkbox.checked == false;
  }
}
</script>

HTML

<body onload= "sta()">

<form id="ed" name="ed" method="post" action="{{action('DetailTestController@update',$id)}}">
    {{csrf_field()}}
    <input type="hidden" name="_method" value="PATCH" />
        <div class="form-group">Name:
     <input type="text" name="name" class="form-control" value="{{$detail->name}}" placeholder="Enter Name" />
        </div>
        <div class="form-group">Description:
                    <input type="textarea" name="description" class="form-control" value="{{$detail->description}}" 
                    placeholder="Enter Description" />
        </div>

//这里是复选框代码

<div class="form-group">Status Type:
    <label class="radio-inline">
        <input type="checkbox" id="status" name="status" value="{{$detail->status}}">
    </label>
</div>

【问题讨论】：

您只需要为输入复选框再添加一个属性
<input type="checkbox" id="status" name="status" value="{{$detail->status}}" {{ $detail->status == 1 ? "checked" : "" }}>

标签： javascript php html laravel checkbox

【解决方案1】：

尝试在元素中添加检查条件，如，

<div class="form-group">Status Type:
            <label class="radio-inline">
               <input type="checkbox" id="status" name="status" value="{{$detail->status}}" @if ($detail->status == 1) checked @endif>
           </label>
         </div>

如果$detail->status == 1 是1，这将检查复选框在这里你不需要它的脚本

【讨论】：

【解决方案2】：

不使用 Javascript 会怎样？

<div class="form-group">Status Type:
    class="radio-inline">
        <input type="checkbox" id="status" name="status" value="{{$detail->status}}" {{$detail->status == 1 ? 'checked' : ''}}>
    </label>
</div>

【讨论】：