如何在点击按钮时获取Onsen Checkbox的多个选中值？

数据老陈

2026-5-7

获取Onsen UI复选框选中值的解决方案

嘿，这事儿不难搞定！Onsen UI的ons-checkbox本质上是对原生复选框的封装，所以我们可以结合原生DOM API轻松拿到所有选中的值。下面是具体的实现步骤和代码示例：

步骤1：准备HTML结构

先确保你的复选框和触发按钮有合适的标识，比如给按钮加个ID方便绑定事件：

<!-- 多个复选框示例 -->
<ons-checkbox input-id="brand1" value="apple" class="checkbox"></ons-checkbox>
<ons-checkbox input-id="brand2" value="samsung" class="checkbox"></ons-checkbox>
<ons-checkbox input-id="brand3" value="google" class="checkbox"></ons-checkbox>

<!-- 触发按钮 -->
<ons-button id="getCheckedBtn">获取选中的品牌</ons-button>

步骤2：编写JavaScript逻辑

给按钮添加点击事件，筛选出所有被选中的复选框并提取它们的value值：

document.getElementById('getCheckedBtn').addEventListener('click', function() {
  // 定位到所有被勾选的ons-checkbox内部的原生复选框元素
  const checkedBoxes = document.querySelectorAll('ons-checkbox input[type="checkbox"]:checked');
  
  // 把NodeList转为数组，再提取每个选中框的value
  const selectedValues = Array.from(checkedBoxes).map(box => box.value);
  
  // 这里可以按需处理选中值，比如打印、弹窗或提交到后端
  console.log('选中的值：', selectedValues);
  alert('选中的品牌：' + selectedValues.join(', '));
});