Kendo Checkbox 检查事件

Posted

技术标签:

【中文标题】Kendo Checkbox 检查事件【英文标题】:Kendo Checkbox check event 【发布时间】: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 如果你不喜欢剑道,看这里:***.com/questions/7031226/… 整个页面都在剑道中,因此我需要一个剑道复选框 @Gerfried 说的是真的。发布您的整个代码 - 最好是在 dojo.telerik.com 中的演示 - 因为您添加的代码应该可以正常工作,check this 【参考方案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 复选框中的更改进行更新。它由剑道处理。

【讨论】:

以上是关于Kendo Checkbox 检查事件的主要内容,如果未能解决你的问题,请参考以下文章

kendo treeview checkbox初始化选中问题,没解决,暂时记录下

Kendo Scheduler 防止编辑/破坏某些事件

Form表单之复选框checkbox操作

关于checkbox全选功能的实现

Kendo MVVM 数据绑定 Checked

Android如何在CheckBox检查事件后更新RecyclerView内TextView的文本样式