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

【问题标题】：get between '(..)' as id for each checked checkbox / re-check each time a checkbox checked (kendo-ui)在'（..）'之间获取每个选中复选框的ID/每次选中复选框时重新检查（kendo-ui）
【发布时间】：2020-07-02 15:02:50
【问题描述】：

我正在使用危险的 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，并在每次选中复选框时重新检查。

【问题讨论】：

您是否在此处使用带有复选框的剑道树形视图？
是剑道树视图复选框

标签： javascript jquery kendo-ui

【解决方案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

【讨论】：

@docholiday 我认为这比您尝试的要简单。
所以这个问题我一次查询所有选中的复选框ID，而不是一次一个，因此我上面的循环试图在点击时检查所有选中的复选框。当复选框不是剑道时，这很有效。现在卡在剑道上，有没有办法让所有用剑道检查的盒子？
@docholiday 在我的回答中，您可以使用.text() 和正则表达式来获得您想要的东西。无论您如何获得复选框。我的意思是，您可以使用 jquery 选择器遍历所有这些，然后在一个循环中，使用我提供给每个人的代码。如果你能创建一个完整的道场你当前的问题也将有助于继续这个问题。