如何在Oracle中无需提交页面，即时将复选框值存储到另一个项中

下面是直接可用的实现方案，无需页面提交就能实时更新目标项内容：

完整代码示例 #

<!-- HTML结构 -->
<div>
  <label><input type="checkbox" value="Google"> Google</label>
  <label><input type="checkbox" value="Bing"> Bing</label>
  <label><input type="checkbox" value="Yahoo"> Yahoo</label>
  <label><input type="checkbox" value="DuckDuckGo"> DuckDuckGo</label>
</div>

<!-- 目标显示项 -->
<div>
  已选搜索引擎：<span id="targetItem"></span>
</div>

<script>
// 获取所有复选框和目标元素
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const targetItem = document.getElementById('targetItem');

// 定义更新目标项的函数
function updateTarget() {
  // 收集所有被选中的复选框值
  const selectedValues = Array.from(checkboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);
  
  // 用冒号拼接并赋值给目标元素
  targetItem.textContent = selectedValues.join(':');
}

// 给每个复选框绑定change事件，触发更新
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateTarget);
});
</script>

代码说明 #

• 通过querySelectorAll获取所有复选框，getElementById拿到要赋值的目标元素
• updateTarget函数：筛选出被选中的复选框，提取它们的value属性，用join(':')把数组转成冒号分隔的字符串，最后赋值给目标元素的文本内容
• 给每个复选框添加change事件监听，只要复选框状态变化，就立即执行更新函数

这样就能实现需求：勾选/取消复选框时，目标项会实时显示所有选中值的冒号分隔字符串。

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