Austin Hoh Austin Hoh - 2 months ago 22
Javascript Question

How to check checkbox when entering the id?

I'm new to kendo framework. i would like to ask that is there any way to check the checkbox by entering the id of the checkbox?
For example
check box id [51,52,53,54,56].
When enter the id of 52 then the check box of 52 would be checked.



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>




Answer

You can use jQuery's .prop method to check the checkboxes by their name attribute.

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

jsbin example

Also this stack overflow post may help you as well on checking/unchecking checkboxes with JavaScript.

Comments