Kendo Checkbox 检查事件答案

【问题标题】：Kendo Checkbox check eventKendo Checkbox 检查事件
【发布时间】：2018-10-01 01:44:30
【问题描述】：

我正在尝试捕捉 kendo 复选框事件，但我无法让它工作。我确定我错过了一些东西。因为我在这个简单的事情上花了一个多小时，我很累。以下是代码sn-p。

HTML

<div class="bottomPadding row">
    <div class="col-md-4 col-sm-4 col-xs-12 col">
        <label>Send Activation Link</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 col">
        <input id="sendLink" type="checkbox" data-bind="checked: Account.IsLink" />
    </div>
</div>

还有JS代码，

$("#sendLink").click(function () {
    if (this.checked) {
        console.log("hit");
    }
});

请纠正我在哪里搞砸了。

P.S：我参考了一些 SO 答案，有些没有答案，有些答案在我的情况下不起作用。

【问题讨论】：

您的示例不包含任何 KENDO...如果您真的使用 Kendo - 请参见此处：demos.telerik.com/kendo-ui/grid/checkbox-selection
如果你不喜欢剑道，看这里：stackoverflow.com/questions/7031226/…
整个页面都在剑道中，因此我需要一个剑道复选框
@Gerfried 说的是真的。发布您的整个代码 - 最好是在 dojo.telerik.com 中的演示 - 因为您添加的代码应该可以正常工作，check this

标签： javascript events checkbox kendo-ui

【解决方案1】：

我已经在我的机器上运行了你的代码并且收到了点击事件，这是我的代码：

    <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-12 col">
        <label>Send Activation Link</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 col">
        <input id="sendLink" type="checkbox" data-bind="checked: Account.IsLink" />
    </div>
</div>
<script>
    $(document).ready(function () {
        clickHookup();
    })
</script>

在我的 JS 文件中：

function clickHookup() {
    $("#sendLink").click(function () {
      if (this.checked) {
        console.log("hit");
      }
    });
}

【讨论】：

你没有包括剑道，是吗？
@JohnLord 是的，你是对的，我将删除我的评论以避免任何未来的混乱，谢谢！

【解决方案2】：

上面的代码工作正常，但这不是剑道。它是纯 jQuery。要使用剑道，请检查这里

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div class="bottomPadding row">
    <div class="col-md-4 col-sm-4 col-xs-12 col">
      <label>Send Activation Link</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 col">
      <input id="sendLink" type="checkbox" data-bind="checked: Account.IsLink" />
    </div>
    
    <div class="col-md-4 col-sm-4 col-xs-12 col">
      <label>Copy Activation Link</label>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12 col">
      <input id="sendLinkCopy" type="checkbox" data-bind="checked: Account.IsLink" />
    </div>
  </div>
  
  <script>
     $("#sendLink").click(function () {
        if (this.checked) {
          console.log("hit");
        }
      });
    
    var viewModel = kendo.observable({
        Account: {
          IsLink: false
        }
    });

    kendo.bind($("#sendLink"), viewModel);
    kendo.bind($("#sendLinkCopy"), viewModel);
  </script>
</body>
</html>

请注意，sendLinkCopy 会根据 sendLink 复选框中的更改进行更新。它由剑道处理。

【讨论】：