I need to add one checkbox on checkout and call one function on checkbox change event, how can I do that?

Check this screenshot for better understanding exactly what I need.

enter image description here

  • Can you provide more info please, does this need to be within an existing UI component or in a custom one? How much UI component/KO do you know? If you already know how to work with both this is how - data-bind="checked: yourFunction" See knockoutjs.com/documentation/checked-binding.html
    – Ben Crook
    Mar 8, 2018 at 13:21
  • Yes, that i check but i need proper way to call this function.
    – Dhrumin
    Mar 8, 2018 at 13:27

2 Answers 2


Yes, i found a solution for checkbox change event.

I have added this checkbox on shipping method section so the html checkbox available on this path.


<input type="checkbox" name="custom" value="custom-fee" data-bind='checked: CheckVal'/>

Now, CheckVal function created in the knockout model file, for me it's available here,


And the code for checked or unchecked event is,

return Component.extend({
        defaults: {
            template: 'Namespace_Mymodule/checkout/shipping/custom'
        initObservable: function () {

                    CheckVal: ko.observable(true)                        

            this.CheckVal.subscribe(function (newValue) {

            return this;
  • I have tried your answer. The event is working fine. But the checkbox is selected by default onpageload when i use the data-bind. Do you have any idea?
    – Agnes
    May 30, 2018 at 13:07
  • 3
    Getting error ReferenceError: CheckVal is not defined
    – akgola
    Nov 5, 2018 at 13:03

you can use

  onCheckedChanged: function () {
            // do something

in your js component


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.