如何从Kendo UI CheckBoxGroup中获取选中的复选框？

核心思路 #

Kendo CheckBoxGroup组件提供了内置API来快速获取选中项，核心分为两步：先获取组件实例，再调用实例方法获取选中值。

具体实现步骤 #

1. 获取CheckBoxGroup实例
   通过jQuery的data()方法获取已初始化的组件实例：

const checkBoxGroup = $("#RoomsCheckBoxList").data("kendoCheckBoxGroup");

2. 获取选中值数组
   调用实例的value()方法，该方法会直接返回所有选中项的值组成的数组：

const selectedItems = checkBoxGroup.value();
// 示例：选中A和C时，返回 ["A", "C"]

完整演示示例 #

可以添加触发按钮来直观展示效果，修改后的代码如下：

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-main.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.bootstrap.min.css" />

<ul id="RoomsCheckBoxList"></ul>
<button id="getSelectedBtn">获取选中项</button>
<p id="result"></p>

JS代码

$(document).ready((e) => {
  GenerateCheckBoxList();
  // 绑定按钮点击事件
  $("#getSelectedBtn").click(() => {
    const checkBoxGroup = $("#RoomsCheckBoxList").data("kendoCheckBoxGroup");
    const selectedValues = checkBoxGroup.value();
    $("#result").text(`选中的项：${selectedValues.join(", ")}`);
  });
});

function GenerateCheckBoxList() {
  const lst = ["A", "B", "C"];
  $("#RoomsCheckBoxList").kendoCheckBoxGroup({
    items: lst,
    layout: "vertical"
  });
}

补充说明 #

• 如果你的CheckBoxGroup使用自定义对象数组作为items（比如[{ text: "选项1", value: "id1" }, ...]），value()方法会返回对应选中项的value属性值数组。
• 也可以监听change事件，在选中状态变化时自动获取选中项：

$("#RoomsCheckBoxList").kendoCheckBoxGroup({
  items: lst,
  layout: "vertical",
  change: function() {
    console.log("当前选中项：", this.value());
  }
});

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