Oracle Apex中如何根据单选组选择隐藏表单字段？

嘿，这个需求其实很好实现，核心就是监听单选组的选择变化，然后动态切换对应字段的显示状态就行。我给你两种常见的实现方案，你可以根据自己的项目技术栈来选：

首先先确认你的HTML结构大概是这样的（可以根据实际情况调整）：

<!-- 单选组 Vrsta Racuna -->
<div class="radio-group">
  <label>
    <input type="radio" name="VrstaRacuna" value="MARINA" checked> MARINA
  </label>
  <label>
    <input type="radio" name="VrstaRacuna" value="SPORT"> SPORT
  </label>
</div>

<!-- 需要切换显示的字段 -->
<div id="rezervacijaField">
  <label for="RezervacijaFK">Rezervacija FK</label>
  <input type="text" id="RezervacijaFK" name="RezervacijaFK">
</div>

<div id="brodicaField">
  <label for="BrodicaFK">Brodica FK</label>
  <input type="text" id="BrodicaFK" name="BrodicaFK">
</div>

然后添加JavaScript逻辑，监听单选按钮的change事件，根据选中的值控制字段显示：

// 获取元素
const radioButtons = document.querySelectorAll('input[name="VrstaRacuna"]');
const rezervacijaField = document.getElementById('rezervacijaField');
const brodicaField = document.getElementById('brodicaField');

// 封装状态更新函数
function updateFieldVisibility(selectedValue) {
  if (selectedValue === 'MARINA') {
    // 选中MARINA时隐藏Rezervacija FK，显示Brodica FK
    rezervacijaField.style.display = 'none';
    brodicaField.style.display = 'block';
  } else if (selectedValue === 'SPORT') {
    // 选中SPORT时隐藏Brodica FK，显示Rezervacija FK
    rezervacijaField.style.display = 'block';
    brodicaField.style.display = 'none';
  }
}

// 页面加载时先执行一次，确保初始状态正确
const initialSelected = document.querySelector('input[name="VrstaRacuna"]:checked').value;
updateFieldVisibility(initialSelected);

// 给每个单选按钮添加监听事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', () => {
    updateFieldVisibility(radio.value);
  });
});

如果你的项目是基于Vue的，那可以用响应式数据来控制字段的显示，代码会更简洁：

<template>
  <div>
    <!-- 单选组 -->
    <label>
      <input type="radio" v-model="selectedType" value="MARINA"> MARINA
    </label>
    <label>
      <input type="radio" v-model="selectedType" value="SPORT"> SPORT
    </label>

    <!-- 字段切换 -->
    <div v-if="selectedType !== 'MARINA'">
      <label>Rezervacija FK</label>
      <input type="text" v-model="rezervacijaFK">
    </div>
    <div v-if="selectedType !== 'SPORT'">
      <label>Brodica FK</label>
      <input type="text" v-model="brodicaFK">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedType: 'MARINA', // 默认选中值
      rezervacijaFK: '',
      brodicaFK: ''
    };
  }
};
</script>

• 如果不想完全隐藏（比如保留占位空间），可以把style.display = 'none'换成style.visibility = 'hidden'，或者用CSS类来控制显示隐藏（更推荐，方便维护样式）。
• 如果你用的是其他框架（比如React、Angular），核心逻辑都是一样的：监听选中值变化，用条件渲染控制字段显示。

内容的提问来源于stack exchange，提问作者FĐŠ