PHP/Laravel中切换开关控制元素显示隐藏的实现指导问询

这里是针对你需求的简洁实现指导，结合你现有代码结构：

• 第一步：给目标容器添加标识类
  找到包裹单选框组的<div class="col-md-10">（也就是@foreach($notificationMessageRadios as $radio)所在的外层div），给它加一个专属类，比如notification-radios-group，这样JavaScript能精准定位元素：

  <div class="col-md-10 notification-radios-group">
      @foreach($notificationMessageRadios as $radio)
          <!-- 现有单选框代码 -->
      @endforeach
  </div>
  

• 第二步：初始化页面状态
  页面加载时，根据开关的初始选中状态，同步设置容器的显示/隐藏状态。可以在页面底部添加一段初始化脚本：

  // 原生JS版本
  document.addEventListener('DOMContentLoaded', function() {
      const toggleSwitch = document.getElementById('notifications_toggle');
      const radiosGroup = document.querySelector('.notification-radios-group');
      
      // 匹配开关初始状态设置容器可见性
      radiosGroup.style.display = toggleSwitch.checked ? 'block' : 'none';
  });
  
  // 若项目已引入jQuery，可简化为：
  $(document).ready(function() {
      $('.notification-radios-group').toggle($('#notifications_toggle').is(':checked'));
  });
  

• 第三步：绑定开关的切换事件
  给开关添加change事件监听，每次切换时触发容器的显示/隐藏切换：

  // 原生JS版本
  document.getElementById('notifications_toggle').addEventListener('change', function() {
      const radiosGroup = document.querySelector('.notification-radios-group');
      radiosGroup.style.display = this.checked ? 'block' : 'none';
  });
  
  // jQuery版本
  $('#notifications_toggle').on('change', function() {
      $('.notification-radios-group').toggle($(this).is(':checked'));
  });
  

• 额外优化建议

  • 如果你用的是Bootstrap，推荐用内置的d-none类控制隐藏，代替直接修改style.display，更符合项目样式规范：

    // 切换d-none类实现显示/隐藏
    radiosGroup.classList.toggle('d-none', !this.checked);
    

  • 确保控制器端的$notificationsEnabled值正确传递到前端，让开关的初始checked状态和容器的初始可见性保持一致，避免页面加载时出现状态不一致的问题。

内容的提问来源于stack exchange，提问作者Austin