javascript - 仅在选择单选按钮时显示表单

Question

我有一个显示一些单选按钮的 View ，每个单选按钮都有一个标题，对应于数据库中存在的每个帖子。下面还有一个创建新帖子的单选按钮“创建新帖子”。

当单击与现有帖子相对应的单选按钮时，表单字段将填充该帖子信息。单击“创建新帖子”单选按钮时，表单字段变为空，因此用户可以输入信息以创建新帖子。

但是当这个页面首先被访问时，表单字段出现了，但我只想首先显示单选按钮，然后只显示基于所选单选按钮的其他表单字段，如果“创建新帖子"单选按钮被选中显示带有空表单字段的表单，如果选择了对应于帖子的单选按钮，我想显示带有填充字段的表单。

您知道如何仅在选择单选按钮时才显示表单，而不是在访问页面时首先显示表单吗？

带有每个帖子单选按钮和“创建新帖子”单选按钮以及其他表单字段的表单:

<form id="editposts" method="post" 
      action="{{route('posts.update', ['post_id' => $post->id])}}" enctype="multipart/form-data">
  {{csrf_field()}}
  <div>
    @foreach($posts as $post)
    <div class="form-check">
      <input class="form-check-input radio" type="radio" name="radiobutton" value="{{ $post->id }}" id="{{$post->id}}">
      <label class="form-check-label">
        {{$post->title}}
      </label>
    </div>
    @endforeach
  </div>
  <div class="form-check">
    <input checked class="form-check-input" type="radio" name="radiobutton" id="create_post"
           value="create_post">
    <label class="form-check-label">
      Create post
    </label>
  </div>

  <!-- form fields, here is the name but are more like description, etc -->
  <div class="form-group">
    <label>Post title</label>
    <input  type="text" required class="form-control" value="{{ old('title') }}" name="title" id="tile">
  </div>
  <input type="submit" id="poststore" value="Create"/>
  <input type="submit" id="postupdate" value="Update"/>
</form>

JS 根据所选帖子填充表单字段并根据所选单选按钮更改表单操作:

var posts = {!!  $post !!}
$("#postupdate").hide();
$("input[name='radiobutton']").click(function() {
  let id = $(this).attr("id");
  if (id == "create_post") {
    $("#postupdate").hide();
    $("#poststore").show();
    $("#editposts").attr('action', '{{route('posts.store', ['post_id' => $post->id])}}');
    $("input[name='title']").val("");
    ...
  } else {
    $("#postupdate").show();
    $("#poststore").hide();
    $("#editposts").attr('action', '{{route('posts.update', ['post_id' => $post->id])}}');
    let data = posts.find(e => e.id == id) || {
      title: "",
      ...

    };
      $("input[name='title']").val(data.title);
      ...
    }
    }); 

Answer 1

这将起作用，因为它隐藏了输入本身，而不是有效隐藏整个表单的表单，包括单选按钮。

<form id="editposts" method="post" 
      action="{{route('posts.update', ['post_id' => $post->id])}}" enctype="multipart/form-data">
  {{csrf_field()}}
  <div>
    @foreach($posts as $post)
    <div class="form-check">
      <input class="form-check-input radio" type="radio" name="radiobutton" value="{{ $post->id }}" id="{{$post->id}}">
      <label class="form-check-label">
        {{$post->title}}
      </label>
    </div>
    @endforeach
  </div>
  <div class="form-check">
    <input checked class="form-check-input" type="radio" name="radiobutton" id="create_post"
           value="create_post">
    <label class="form-check-label">
      Create post
    </label>
  </div>

  <!-- form fields, here is the name but are more like description, etc -->
  <div class="form-group post_form_controls">
    <label>Post title</label>
    <input  type="text" required class="form-control" value="{{ old('title') }}" name="title" id="tile">
  </div>
  <input type="submit" id="poststore" value="Create" />
  <input type="submit" id="postupdate" value="Update" />
</form>

添加了 CSS

.post_form_controls,#poststore,#postupdate {
  display: none;
}

添加了 jQuery

...
$('.post_form_controls').show();
$('input[type="submit"]').hide();
$('#poststore').show(); // or $('#postupdate').show() using whatever logic you want;
...

编辑:根据您对以下问题的评论，我会查看 jQuery get value of selected radio button .听起来您想使用 checked 而不是 click 事件。