Question

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

＆＃13;

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)
});

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您可以使用jQuery的.prop方法按名称属性选中复选框。

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

jsbin example

this stack overflow帖子也可以帮助您检查/取消选中JavaScript复选框。

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

1 个答案: