Oracle APEX 21.1 如何根据按钮点击状态更改区域背景色

新版APEX（20.2及以上版本）最优原生方案 #

不需要写自定义JavaScript，用平台内置动态动作就能实现，维护成本最低：

• 先打开页面属性，找到「CSS」→「内联CSS」配置项，加入两个状态对应的样式：

.bg-state-on {
  background: #ffffff !important;
}
.bg-state-off {
  background: #fff176 !important; /* 柔和黄色视觉效果更友好，后续要换色直接改这里即可 */
}

• 找到按钮P21_CHECKOUT_BUTTON，给它绑定单击触发的动态动作：
  • 第一个动作选「切换CSS类」，目标元素指定为P21_CHECKOUT区域，要切换的类名填bg-state-off，这个动作会在每次点击时自动给区域添加/移除黄色背景类，正好对应OFF/ON的状态切换逻辑。
  • 第二个动作选「执行PL/SQL代码」，放入你原有的开关状态切换业务逻辑，两个动作同步执行，不会出现样式和业务状态不同步的问题。

兼容旧版本的JS实现方案 #

如果是低版本APEX没有内置的CSS类切换动作，就用JS赋值方式实现，稳定性完全满足使用需求：

• 第一步和上面一致，先把两个状态的CSS类加到页面内联CSS里，不推荐直接写行内样式，后续调整样式不需要改动业务逻辑。
• 在你原有切换OFF/ON状态的PL/SQL逻辑执行完成后，新增一个「执行JavaScript代码」的动作节点，写入以下代码即可：

// 读取存储当前开关状态的隐藏页面项值，替换成你实际存状态的页面项ID即可
const currentStatus = $v('P21_IS_CHECKED');
const $checkoutRegion = apex.jQuery('#P21_CHECKOUT');

// 先清除旧的状态类，避免样式冲突
$checkoutRegion.removeClass('bg-state-on bg-state-off');
// 根据当前状态添加对应背景类
currentStatus === 'ON' 
  ? $checkoutRegion.addClass('bg-state-on')
  : $checkoutRegion.addClass('bg-state-off');

• 避坑提示：不要手动写原生JS遍历找DOM元素，用APEX内置的apex.jQuery和$v()方法取值，不会因为APEX版本升级、DOM结构变动导致代码失效。

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