laravel 如何根据复选框的值隐藏和显示HTML字段?

13z8s7eq  于 2023-05-19  发布在  其他
关注(0)|答案(1)|浏览(118)

我有以下复选框:

<!-- Choose betweeen Upload a video and Insert a video link -->
<div class="row mb-3">
    <label class="control-label">Link video</label>
    <input type="checkbox" name="link_video"
        value="0"
        class="switch checkbox-action"
    />
</div>

默认值为false,也就是我希望允许用户上传一个视频,也就是我希望有以下代码:

<!-- Upload a video -->
<div class="row">
    <div class="col-md-12 mb-3">
        <p>
            Put the video here
        </p>
        {!! Form::hidden('temp_video_filename') !!}
        <input-dropzone
            name="video-dropzone"
            label="Dropzone"
            url="/admin/object/upload-video"
            :config="{
                clickable:true,
                chunking:true,
                chunkSize: 250000,
                parallelUploads: 1,
                uploadMultiple: false,
                maxFilesize: 1000,
                maxFiles: 1,
                acceptedFiles: '.mov, .mp4'
            }"
            @click="initVideoUpload()"
            @drop="initVideoUpload()"
            @upload="videoUploaded($event)"
        />
    </div>
    @if($a->video_id)
    <div class="col-md-12 uploaded-videos">
        <a href="{{ $a->getDirectPlayUrl() }}" target="_blank" class="btn btn-primary download">
            <i class="fa fa-play"></i> View video
        </a>

        <button class="btn btn-danger btn-rounded btn-delete remove" data-record="File" data-url="{{ $a->getAdminVideoRemoveApiUrl() }}" data-callback-function="A.removedAdminVideo">
            <icon-delete color="var(--on-error)"></icon-delete> Remove file
        </button>
    </div>
    @endif
</div>

但是,如果用户单击复选框,即该值为true,则会显示以下字段:

<!-- Insert video link -->
    <div class="row mb-3">
        <div class="col-md-6">
            {!! Form::field('video_embed_url', ['label' => __('labels.link_video')]) !!}
        </div>
        <!-- Force next columns to break to new line -->
        <div class="w-100"></div>
        <div class="col-md-6">
            {!! Form::label(__('labels.preview')) !!}
        </div>
    </div>
e4yzc0pl

e4yzc0pl1#

如果要额外显示,可以使用jQuery和onClick事件。试试下面的代码:

<!-- Choose betweeen Upload a video and Insert a video link -->
<div class="row mb-3">
  <div class="form-check">
  <input type="checkbox" 
      class="form-check-input switch checkbox-action"
      id="link_video"
      name="link_video"
      value="0"
      onclick="$('#extraField').toggle();"
  />
  <label class="form-check-label" for="link_video">Link video</label>
  </div>
</div>

对于field:

<!-- Insert video link -->
<div class="row mb-3" id="extraField" style="display: none;">
  <div class="col-md-6">
      {!! Form::field('video_embed_url', ['label' => __('labels.link_video')]) !!}
  </div>
  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>
  <div class="col-md-6">
      {!! Form::label(__('labels.preview')) !!}
  </div>
</div>

如果您正在使用Bootstrap,请参阅:Collapse

相关问题