JSFiddle - React, Tailwind, and code Playground

HTML

Event: <span id='info'></span> <br /><br />
<input type='checkbox' id='mycheckbox' />  <br />
<span id='mydiv'></span>  <br />
<input type='button' id='mybutton' value='' />

CSS

#mybutton{
    padding:4px 6px;
}

JavaScript

jQuery(document).ready(function($) {
    $('#mybutton').toggle(function() {
        $('#mycheckbox').unbind('click').bind('change', cb);
        $('#mybutton').val('Bind click event');
        $('#info').html('change');
    }, function() {
        $('#mycheckbox').unbind('change').bind('click', cb);
        $('#mybutton').val('Bind change event');
        $('#info').html('click');
    }).click();
});

function cb() {
    $('#mydiv').html(new Date().toGMTString());
}