如何实现选择Jenis Layanan下拉选项后控制radio button显隐

1. 新增单选按钮组代码 #

在现有代码的「Jenis Layanan」区块和「Tanggal Pelayanan」区块之间，插入默认隐藏的单选按钮组结构，你可以根据实际业务需求修改单选选项的内容和值：

<!-- 插入位置：Jenis Layanan的div结束后，Tanggal Pelayanan的div开始前 -->
<div class="p-2" id="corporate_radio_wrap" style="display:none;">
  <div class="form-group">
    <label class="form-label font-weight-bold">企业服务选项</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="corp_option" id="corp_opt1" value="a">
      <label class="form-check-label" for="corp_opt1">企业选项1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="corp_option" id="corp_opt2" value="b">
      <label class="form-check-label" for="corp_opt2">企业选项2</label>
    </div>
  </div>
</div>

2. 添加联动控制逻辑 #

在页面的<script>标签中加入以下原生JS代码，即可实现选择联动效果：

// 获取对应DOM节点
const selectEl = document.getElementById('sub_product');
const radioWrapEl = document.getElementById('corporate_radio_wrap');

// 切换单选区域显示状态的函数
function switchRadioStatus() {
  // 选中Corporate（对应value为3）时显示，否则隐藏
  if(selectEl.value === '3') {
    radioWrapEl.style.display = 'block';
  } else {
    radioWrapEl.style.display = 'none';
    // 隐藏时清空单选选中状态，避免提交无效数据
    radioWrapEl.querySelectorAll('input[type="radio"]').forEach(item => item.checked = false);
  }
}

// 监听下拉框选择变化
selectEl.addEventListener('change', switchRadioStatus);
// 页面加载时执行一次，兼容刷新后选中值的状态匹配
switchRadioStatus();

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