jQWidgets jqxListBox getCheckedItems() 方法(1)

📌 相关文章

📜 jQWidgets jqxListBox getCheckedItems() 方法(1)

📅 最后修改于: 2023-12-03 15:02:19.533000 🧑 作者: Mango

jQWidgets jqxListBox getCheckedItems() 方法介绍

在 jQWidgets 中，jqxListBox 是用于显示列表的控件。getCheckedItems() 方法，可以用于获取 jqxListBox 中被选中的项。

方法说明

方法名称：getCheckedItems()
返回值：数组，包含被选中的项

使用方法

首先需要在 HTML 中引入 jQWidgets 的相关文件。

<!-- jqxWidgets CSS 文件 -->
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
<!-- jqxWidgets JavaScript 文件 -->
<script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="./jqwidgets/jqxlistbox.js"></script>

然后在 JavaScript 中初始化 jqxListBox 控件。

// 初始化 jqxListBox
$("#listbox").jqxListBox({
  source: ["Item 1", "Item 2", "Item 3"],
  checkboxes: true
});

其中，checkboxes: true 表示启用多选。

最后使用 getCheckedItems() 方法获取被选中的项。

// 获取被选中的项
var checkedItems = $("#listbox").jqxListBox('getCheckedItems');
checkedItems.forEach(function(item, index) {
  console.log(item.label);
});

示例

以下是一个完整的例子：

<!DOCTYPE html>
<html>
<head>
  <!-- jqxWidgets CSS 文件 -->
  <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
  <!-- jqxWidgets JavaScript 文件 -->
  <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
  <script type="text/javascript" src="./jqwidgets/jqxlistbox.js"></script>
</head>
<body>
  <div id="listbox"></div>
  <script type="text/javascript">
    // 初始化 jqxListBox
    $("#listbox").jqxListBox({
      source: ["Item 1", "Item 2", "Item 3"],
      checkboxes: true
    });

    // 获取被选中的项
    var checkedItems = $("#listbox").jqxListBox('getCheckedItems');
    checkedItems.forEach(function(item, index) {
      console.log(item.label);
    });
  </script>
</body>
</html>

在以上例子运行后，可在浏览器的开发者工具中的控制台输出被选中的项。