实现动态表单：基于单选按钮选择控制字段显示与隐藏的CSS方案

<!-- spec 字段不是 radio 的兄弟元素 -->
<div>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>
</div>
<div class="form-group row"> <!-- spec 字段的父元素与 radio 不同 -->
  <!-- ... spec 字段内容 ... -->
</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>

  <!-- spec 字段的容器 div 必须是 radio input 的兄弟元素，且在其之后 -->
  <div class="spec-field-container 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>

/* 默认情况下，spec 字段容器隐藏 */
.spec-field-container {
  display: none;
}

/* 当 ID 为 'javascript' 的单选按钮被选中时，显示 spec 字段容器 */
#javascript:checked ~ .spec-field-container {
  display: block; /* 或者 display: flex, display: grid 等，取决于你的布局 */
}

/* 另一种更简洁的写法：当 ID 为 'css' 的单选按钮未被选中时，隐藏 spec 字段容器 */
/* 如果默认就是隐藏，并且只有特定选择才显示，这种写法可能更直观 */
/* #css:not(:checked) ~ .spec-field-container {
  display: none;
} */

// 示例伪代码
document.addEventListener('DOMContentLoaded', function() {
  const radioButtons = document.querySelectorAll('input[name="fav_language"]');
  const specFieldContainer = document.querySelector('.spec-field-container');

  function updateSpecFieldVisibility() {
    let isJavaScriptSelected = false;
    radioButtons.forEach(radio => {
      if (radio.checked && radio.value === 'JavaScript') {
        isJavaScriptSelected = true;
      }
    });

    if (isJavaScriptSelected) {
      specFieldContainer.style.display = 'block';
    } else {
      specFieldContainer.style.display = 'none';
    }
  }

  // 初始加载时设置一次可见性
  updateSpecFieldVisibility();

  // 监听单选按钮变化
  radioButtons.forEach(radio => {
    radio.addEventListener('change', updateSpecFieldVisibility);
  });
});

// app/Http/Livewire/RegisterForm.php
namespace App\Http\Livewire;

use Livewire\Component;

class RegisterForm extends Component
{
    public $favLanguage = 'CSS'; // 默认值
    public $spec;

    public function render()
    {
        return view('livewire.register-form');
    }
}

{{-- resources/views/livewire/register-form.blade.php --}}
<div>
    <div>
        <input type="radio" id="css" name="fav_language" value="CSS" wire:model="favLanguage">
        <label for="css">CSS</label><br>
        <input type="radio" id="javascript" name="fav_language" value="JavaScript" wire:model="favLanguage">
        <label for="javascript">JavaScript</label>
    </div>

    @if ($favLanguage === 'JavaScript')
        <div class="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" name="spec" wire:model="spec">
                <!-- 错误处理等 -->
            </div>
        </div>
    @endif
</div>