Kendo Checkbox check event

Question

I am trying to catch the kendo checkbox event, but I couldn't get it work. I am sure I am missing something. As I spent more than an hour in this simple thing, I am very tired. Following is the code snippet.

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>

And the JS code,

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

Please correct me where I did mess.

P.S: I have referred few SO answers, some doesn't have answers and some answers are not working in my case.

your example does not include any KENDO... if you really use Kendo - see here: https://demos.telerik.com/kendo-ui/grid/checkbox-selection — ESP32, Apr 20 '18 at 10:53
if you do not mess with Kendo, see here: https://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event — ESP32, Apr 20 '18 at 10:53
Whole page is in Kendo, Hence I need a kendo checkbox in my case — Jeya Suriya Muthumari, Apr 20 '18 at 10:55
What @Gerfried said is true. Post your whole code - preferably a demo in http://dojo.telerik.com - because the code you have added should work fine, [check this](https://jsfiddle.net/2vsnwrvm/1/) — DontVoteMeDown, Apr 20 '18 at 10:57

score 6 · Accepted Answer · edited Mar 22 '22 at 00:05

6

I have ran your code on my machine and have received the click event fine, here is my code:

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

And in my JS file:

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

edited Mar 22 '22 at 00:05

xxx

1,153
1
11
23

answered Apr 20 '18 at 10:59

GeorgeB

808
1
8
26

You did not include Kendo, did you? – ESP32 Apr 20 '18 at 12:01
1

@JohnLord yes you are right, I will delete my comment to avoid any future confusion, thanks! – GeorgeB Jul 23 '20 at 08:16

score 4 · Answer 2 · answered Apr 20 '18 at 11:04

The above code works fine, but that is not kendo. It is pure jQuery. To use kendo please check this

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

Note that sendLinkCopy updates based on changes in sendLink checkbox. It is handled by kendo.

Kendo Checkbox check event

2 Answers2