如何在输入ID时选中复选框？

我是新来的剑道框架。我想问一下，有没有办法通过输入复选框的ID来检查复选框？例如复选框ID [51,52,53,54,56]。当输入52的ID时，将检查52的复选框。如何在输入ID时选中复选框？

var data; 
 
var gridColumns; 
 
var grid; 
 
var showlist; 
 
var viewModel; 
 
var checklist = document.getElementById("checklist"); 
 
viewModel = kendo.observable({ 
 
    showlist: false, 
 

 
}); 
 

 
kendo.bind($(checklist), viewModel); 
 

 
function onChange() { 
 
    viewModel = kendo.observable({ 
 
    showlist: true, 
 
    }); 
 
    kendo.bind($(checklist), viewModel); 
 
} 
 

 
var PrimaryProbe = new kendo.data.HierarchicalDataSource({ 
 
    data: [{ 
 
    id: 5, 
 
    parent_id: 0, 
 
    value: "General - Primary Probe", 
 
    expanded: true, 
 
    items: [{ 
 
     id: 51, 
 
     parent_id: 5, 
 
     value: "Agent Running Mode" 
 
    }, { 
 
     id: 52, 
 
     parent_id: 5, 
 
     value: "Agent Version" 
 
    }, { 
 
     id: 53, 
 
     parent_id: 5, 
 
     value: "Master/Slave Mode" 
 
    }, { 
 
     id: 54, 
 
     parent_id: 5, 
 
     value: "Manufacturer" 
 
    }, { 
 
     id: 55, 
 
     parent_id: 5, 
 
     value: "Model" 
 
    }, { 
 
     id: 56, 
 
     parent_id: 5, 
 
     value: "Software Version" 
 
    }] 
 
    }] 
 
}); 
 

 

 
function onCheck() { 
 
    var message; 
 
    var checkedNodes = []; 
 

 
    checkedNodeIds(treeView.dataSource.view(), checkedNodes); 
 
    if (checkedNodes.length > 0) { 
 
    message = "IDs of checked nodes: " + checkedNodes.join(","); 
 
    } else { 
 
    message = "No nodes checked."; 
 
    } 
 
    $("#result").html(message); 
 
} 
 

 
treeView = $("#treeview").kendoTreeView({ 
 
    checkboxes: { 
 
    checkChildren: false, 
 
    template: "# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#" 
 
    }, 
 
    check: onCheck, 
 
    dataSource: PrimaryProbe, 
 
    dataTextField: "value" 
 
}).data("kendoTreeView"); 
 

 
function checkedNodeIds(nodes, checkedNodes) { 
 
    //console.log(nodes); 
 
    for (var i = 0; i < nodes.length; i++) { 
 
    if (nodes[i].checked) { 
 
     checkedNodes.push(nodes[i].id); 
 
    } 
 
    if (nodes[i].hasChildren) { 
 
     checkedNodeIds(nodes[i].children.view(), checkedNodes); 
 
    } 
 
    } 
 
} 
 
$("#get").click(function() { 
 

 
    alert(checklist.value) 
 
});

#fieldlist { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#fieldlist li { 
 
    list-style: none; 
 
    padding-bottom: 1.5em; 
 
    text-align: left; 
 
} 
 
#fieldlist label { 
 
    display: block; 
 
    padding-bottom: .3em; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    font-size: 12px; 
 
} 
 
.searchClientText { 
 
    width: 222px !important; 
 
    height: 25px !important; 
 
    border-radius: 3px; 
 
} 
 
.checkboxList { 
 
    margin: 0 0 -1em; 
 
    padding: 0; 
 
} 
 
.checkboxList li { 
 
    list-style: none; 
 
    padding-bottom: 1em; 
 
} 
 
td { 
 
    width: 150px; 
 
    vertical-align: top; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 
    <meta charset=utf-8 /> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <div class="demo-section k-content"> 
 
    <ul id="fieldlist"> 
 
     <li> 
 
     <input id="checklist" class="k-input searchClientText" type="text" placeholder=51-56 style="height:auto;" /> 
 
     <button class="k-button k-primary" id="get">check</button> 
 
     </li> 
 
    </ul> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <div id="treeview"></div> 
 
      <div id="result"></div> 
 
     </td> 
 
     </tr> 
 
    </table> 
 

 
    </div> 
 
    <div id="checklist"> 
 

 
    </div> 
 

 

 

 

 
</body> 
 

 
</html>

来源

2016-09-28 Austin Hoh

您可以使用jQuery的.prop方法，通过他们的name属性检查复选框。

$("input[name='checkedFiles[" + checklist.value + "]']").prop("checked", true);

jsbin example

而且this stack overflow后可能会帮助你，以及在检查/使用JavaScript取消选中复选框。

来源

2016-09-28 02:24:27 jamez14

太棒了，它完美的工作。非常感谢 –

如何在输入ID时选中复选框？

回答

相关问题