Magento2 : checkbox change function in knockout js

Question

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.

Answer 1

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.

/view/frontend/web/template/checkout/shipping/custom.html


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

/view/frontend/web/js/view/checkout/shipping/custom.js

And the code for checked or unchecked event is,

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

            this._super()
                .observe({
                    CheckVal: ko.observable(true)                        
                });

            this.CheckVal.subscribe(function (newValue) {
                if(newValue){
                    console.log('checked');
                }else{
                    console.log('Unchecked');
                }
            });

            return this;
        }
    });

Answer 2

you can use

  onCheckedChanged: function () {
            // do something
        }

in your js component

vendor/magento/module-ui/view/base/web/js/form/element/single-checkbox.js