How to inherit components to avoid duplicate code?

There are two components (php+js+css): a Checkbox and a Switch.
JS code makes both essentially the same, with the only difference that input refers to the different elements of a DOM tree:
ksf.classes.KsfCheckbox = class {
 constructor( el ) {
 let _this = this;
 let change = new Event( 'change' );
 this.el = el;
 this.input = el.getElementsByClassName( 'checkbox__input' )[ 0 ];
 this.value = +this.input.checked + ";

 this.input.addEventListener( 'change', function() {
 _this.el.dispatchEvent( change );
 } );

 this.el.addEventListener( 'click', function( e ) {
e.preventDefault();
toggleValue();
 } );

 /* Space Pressed */
 this.el.addEventListener( 'keypress', function( e ) {
 if ( e.which === 32 ) {
e.preventDefault();
toggleValue();
}
 } );

 function toggleValue() {
 if ( _this.value === '0' ) {
 _this.value = '1';
 _this.input.checked = true;
 } else {
 _this.value = '0';
 _this.input.checked = false;
}
}
}

 setValue( value ) {
 this.input.checked = !! parseInt( value );
 this.value = parseInt( value ) + ";
}

 getValue() {
 return this.value;
}

};


ksf.classes.KsfSwitch = class {
 constructor( el ) {
 let _this = this;
 let change = new Event( 'change' );
 this.el = el;
 this.input = el.getElementsByClassName( 'switch__input' )[ 0 ];
 this.value = +this.input.checked + ";

 this.input.addEventListener( 'change', function() {
 _this.el.dispatchEvent( change );
 } );

 this.el.addEventListener( 'click', function( e ) {
e.preventDefault();
toggleValue();
 } );

 /* Space Pressed */
 this.el.addEventListener( 'keypress', function( e ) {
 if ( e.which === 32 ) {
e.preventDefault();
toggleValue();
}
 } );

 function toggleValue() {
 if ( _this.value === '0' ) {
 _this.value = '1';
 _this.input.checked = true;
 } else {
 _this.value = '0';
 _this.input.checked = false;
}
}
}

 setValue( value ) {
 this.input.checked = !! parseInt( value );
 this.value = parseInt( value ) + ";
}

 getValue() {
 return this.value;
}

};


JS files of the components are in different files, then glued everything into a single file using gulp concat.
As these components properly inherit in JS from some other component (for example, "toggler") to not duplicate code?
June 8th 19 at 17:16
0 answer

Find more questions by tags JavaScript