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

Question

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

我有这个字段：

<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 语句实现此目的？

Answer 1

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

要使用CSS，只有HTML代码必须是，因此需要隐藏或显示的div必须是input的"弟弟"。换句话说，div必须放置在同一水平上，并且在input之后(无需紧随其后)。这样，您将能够将通用同级选择器和：checked伪类选择器结合起来

.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;
}

编辑：我很想从问题中删除拉拉维尔标签，但你想实现的东西也可以用拉拉维尔直播线完成