如何在php laravel中用户选择无线电输入的字段中隐藏或显示？

Posted 2023-03-14

【中文标题】如何在php laravel中用户选择无线电输入的字段中隐藏或显示？

【英文标题】：How to hide or show from field upon user choice of radio input in php laravel?

【发布时间】：2021-12-14 07:15:17

【问题描述】：

我已经为用户注册创建了一个表单，但是如果用户选择其中一个，表单会显示或隐藏额外的字段

我有这个字段：

 <div class="form-group row" style="display:none">
    <label for="spec" class="col-md-4 col-form-label text-md-right"> 
       __('spec') 
    </label>
    <div class="col-md-6">
        <input id="spec" type="text" class="form-control @error('spec') is-invalid @enderror" name="spec" value=" old('spec') " autocomplete="spec" autofocus>
      @error('spec')
          <span class="invalid-feedback" role="alert">
              <strong> $message </strong>
          </span>
       @enderror
     </div>
  </div>

默认隐藏

我有这些无线电输入：

 <div>
    <input type="radio" id="css" name="fav_language" value="CSS">
    <label for="css">CSS</label><br>
    <input type="radio" id="javascript" name="fav_language" value="JavaScript">
    <label for="javascript">JavaScript</label>
 </div>

因此，如果用户选择了第一个收音机，则将隐藏第一个字段（规范），如果用户选择了第二个收音机，则（规范）字段将不再隐藏

如何使用 if 语句来实现？

【问题讨论】：

你必须使用 JavaScript 或 jQuery。看***.com/questions/13152927/…

【参考方案1】：

我基本同意 Devsi Odedra 的评论。它会更容易，它会给你更多的灵活性来使用 Javascript，但你不必这样做。有一个仅使用 CSS 的解决方案。

要使用 CSS，仅 html 代码必须是这样，因此需要隐藏或显示的 div 必须是 input 的“年轻兄弟”。换句话说，div 必须放在同一层并且在input 之后（不需要直接放在之后）。这样你就可以组合general sibling selector和:checked pseudo-class selector

.show-only-if-css-is-checked 
  display: none;


#css:checked ~ .show-only-if-css-is-checked 
  display: block;

<div>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>

  <div class="show-only-if-css-is-checked form-group row">
    <label for="spec" class="col-md-4 col-form-label text-md-right"> 
       __('spec') 
    </label>
    <div class="col-md-6">
      <input id="spec" type="text" class="form-control @error('spec') is-invalid @enderror" name="spec" value=" old('spec') " autocomplete="spec" autofocus> @error('spec')
      <span class="invalid-feedback" role="alert">
              <strong> $message </strong>
          </span> @enderror
    </div>
  </div>
</div>

CSS 部分甚至可以更短

#css:not(:checked) ~ .show-only-if-css-is-checked 
  display: none;

编辑：我很想从问题中删除 laravel 标记，但是您想要实现的目标也可以使用 Laravel livewire 来完成