在'(..)'之间获取每个选中的复选框的ID/每次选中复选框时重新检查（kendo-ui）

Question

我正在和奸诈的 kendo-ui 一起工作，这让添加选择器成为一场噩梦；无论如何我只是想点击一个输入复选框元素来简单地获取id选择器的内部内容，我需要介于(和)之间.在括号之间。

kendo ui 的复选框嵌套在 <li> 标签中，并且在选中时似乎没有更改为 .checked，我注意到 li 的 aria-checked 确实在选中时更改为“true”，因此我尝试将其用作句柄。

我成功地在下面的父 li 标签上添加了事件侦听器：

        let chkst = document.querySelector('#shake-tree li.k-item');
        if (chkst) {
          chkst.addEventListener("click", filterByID);
        } else {
          getCur();
        }

在我的 filterByID 函数中，我尝试搜索已检查状态并获取 id 内容和正则表达式到内括号。下面只是控制台日志什么都没有，所以要么没有检测到 aria-checked 正确，要么伪选择器不工作。

   ....
   let idChkBoxes = document.querySelectorAll(`#shake-tree li.k-item`);
    idChkBoxes.forEach(function (node) { 
      console.log(node); <---- this consoles as the below html screenshot, same
      if (node.getAttribute("aria-checked") === true) {
          let s = $(node + ">" + "input[type='checkbox']");
          let sID = s.getAttribute("id");
          console.log(s);
          let idStr = sID.split(/[()]/);
          sqlExp += "'" + idStr + "' ";          
      }
    });
    ........

也试过这个：

 if ($(node).attr('aria-checked') === "true"){
              console.log(node);
 ........

这是标记的屏幕截图：

正如您在上面的标记中看到的那样 ^ 我需要的 id 也在 span.k-in 元素的内部文本中，因此如果需要也可以抓住那里，但似乎更难访问.

我的目标是在每个选中的复选框的 (..) 括号 id 之间，并在每次选中复选框时重新检查.

Answer 1

试试这个：

$("#treeview").kendoTreeView({
    // Other initialization properties...
    check: onCheck
});

function onCheck(e) {
    let nodeText = $(e.node).text();
      
    console.log(nodeText.match(/\((.+)\)/)[1]);
}

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/checkboxes">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
    
    

</head>
<body>
<div id="example">

    <div class="demo-section k-content">
        <div id="treeview"></div>
    </div>

    <script>
        $("#treeview").kendoTreeView({
            checkboxes: {
                checkChildren: true
            },

            check: onCheck,

            dataSource: [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                            { id: 3, text: "about.html (123)", spriteCssClass: "html" },
                            { id: 4, text: "index.html (123)", spriteCssClass: "html" },
                            { id: 5, text: "logo.png (123)", spriteCssClass: "image" }
                        ]
                    },
                    {
                        id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "mockup.jpg (123)", spriteCssClass: "image" },
                            { id: 8, text: "Research.pdf (123)", spriteCssClass: "pdf" },
                        ]
                    },
                    {
                        id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { id: 10, text: "February.pdf (123)", spriteCssClass: "pdf" },
                            { id: 11, text: "March.pdf (123)", spriteCssClass: "pdf" },
                            { id: 12, text: "April.pdf (123)", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }]
        });

        // show checked node IDs on datasource change
        function onCheck(e) {
          let nodeText = $(e.node).text();
          
          console.log(nodeText.match(/\((.+)\)/)[1]);
        }
    </script>

    <style>
        #treeview .k-sprite {
            background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder { background-position: 0 0; }
        .folder     { background-position: 0 -16px; }
        .pdf        { background-position: 0 -32px; }
        .html       { background-position: 0 -48px; }
        .image      { background-position: 0 -64px; }
    </style>

</div>


</body>
</html>

Dojo

在'(..)'之间获取每个选中的复选框的ID/每次选中复选框时重新检查（kendo-ui）

get between '(..)' as id for each checked checkbox / re-check each time a checkbox checked (kendo-ui)

javascript

jquery

kendo-ui