Add typings for the HOT instance in the examples

handsontable · May 14, 2024 · d4b2013 · d4b2013
1 parent ab45ef0
commit d4b2013
Show file tree

Hide file tree

Showing 56 changed files with 56 additions and 56 deletions.
diff --git a/docs/content/guides/accessibility/accessibility/javascript/example1.ts b/docs/content/guides/accessibility/accessibility/javascript/example1.ts
@@ -545,7 +545,7 @@ const hotOptions = {
 };
 
 // Initialize the Handsontable instance with the specified configuration options
-let hotInstance = new Handsontable(app, hotOptions);
+let hotInstance: Handsontable = new Handsontable(app, hotOptions);
 
 // Helper function to set up checkbox event handling
 const setupCheckbox = (element, callback) =>

diff --git a/docs/content/guides/accessories-and-menus/context-menu/javascript/example1.ts b/docs/content/guides/accessories-and-menus/context-menu/javascript/example1.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
     ['2017', 10, 11, 12, 13, 15, 16],

diff --git a/docs/content/guides/accessories-and-menus/context-menu/javascript/example2.ts b/docs/content/guides/accessories-and-menus/context-menu/javascript/example2.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example2');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
     ['2017', 10, 11, 12, 13, 15, 16],

diff --git a/docs/content/guides/accessories-and-menus/context-menu/javascript/example3.ts b/docs/content/guides/accessories-and-menus/context-menu/javascript/example3.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example3');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
     ['2017', 10, 11, 12, 13, 15, 16],

diff --git a/docs/content/guides/accessories-and-menus/export-to-csv/javascript/example1.ts b/docs/content/guides/accessories-and-menus/export-to-csv/javascript/example1.ts
@@ -3,7 +3,7 @@ import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example1');
 const button = document.querySelector('#export-file');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
     ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],

diff --git a/docs/content/guides/accessories-and-menus/export-to-csv/javascript/example2.ts b/docs/content/guides/accessories-and-menus/export-to-csv/javascript/example2.ts
@@ -3,7 +3,7 @@ import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example2');
 const button = document.querySelector('#export-blob');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
     ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],

diff --git a/docs/content/guides/accessories-and-menus/export-to-csv/javascript/example3.ts b/docs/content/guides/accessories-and-menus/export-to-csv/javascript/example3.ts
@@ -3,7 +3,7 @@ import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example3');
 const button = document.querySelector('#export-string');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],
     ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],

diff --git a/docs/content/guides/accessories-and-menus/undo-redo/javascript/example.ts b/docs/content/guides/accessories-and-menus/undo-redo/javascript/example.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1'],
     ['A2', 'B2', 'C2', 'D2', 'E2'],

diff --git a/docs/content/guides/cell-features/autofill-values/javascript/example1.ts b/docs/content/guides/cell-features/autofill-values/javascript/example1.ts
@@ -11,7 +11,7 @@ const data: (string | number)[][] = [
   ['2021', '', '', '', '']
 ];
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   rowHeaders: true,
   colHeaders: true,
   fillHandle: true, // possible values: true, false, "horizontal", "vertical",

diff --git a/docs/content/guides/cell-features/autofill-values/javascript/example2.ts b/docs/content/guides/cell-features/autofill-values/javascript/example2.ts
@@ -11,7 +11,7 @@ const data: (string | number)[][] = [
   ['2021', '', '', '', '']
 ];
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   rowHeaders: true,
   colHeaders: true,

diff --git a/docs/content/guides/cell-features/comments/javascript/example1.ts b/docs/content/guides/cell-features/comments/javascript/example1.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
     ['2017', 10, 11, 12, 13, 15, 16],

diff --git a/docs/content/guides/cell-features/conditional-formatting/javascript/example1.ts b/docs/content/guides/cell-features/conditional-formatting/javascript/example1.ts
@@ -39,7 +39,7 @@ function negativeValueRenderer(instance, td, row, col, prop, value, cellProperti
 // maps function to a lookup string
 Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   licenseKey: 'non-commercial-and-evaluation',
   height: 'auto',

diff --git a/docs/content/guides/cell-features/disabled-cells/javascript/example1.ts b/docs/content/guides/cell-features/disabled-cells/javascript/example1.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
     { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },

diff --git a/docs/content/guides/cell-features/disabled-cells/javascript/example2.ts b/docs/content/guides/cell-features/disabled-cells/javascript/example2.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example2');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
     { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },

diff --git a/docs/content/guides/cell-features/disabled-cells/javascript/example3.ts b/docs/content/guides/cell-features/disabled-cells/javascript/example3.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example3');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
     { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },

diff --git a/docs/content/guides/cell-features/disabled-cells/javascript/example4.ts b/docs/content/guides/cell-features/disabled-cells/javascript/example4.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example4');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
     { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },

diff --git a/docs/content/guides/cell-features/disabled-cells/javascript/exampleReadOnlyGrid.ts b/docs/content/guides/cell-features/disabled-cells/javascript/exampleReadOnlyGrid.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#exampleReadOnlyGrid');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
     { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },

diff --git a/docs/content/guides/cell-features/formatting-cells/javascript/example1.ts b/docs/content/guides/cell-features/formatting-cells/javascript/example1.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1'],
     ['A2', 'B2', 'C2', 'D2', 'E2'],

diff --git a/docs/content/guides/cell-features/formatting-cells/javascript/example2.ts b/docs/content/guides/cell-features/formatting-cells/javascript/example2.ts
@@ -10,7 +10,7 @@ Handsontable.renderers.registerRenderer('customStylesRenderer', (hotInstance, TD
 });
 
 const container = document.querySelector('#example2');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1'],
     ['A2', 'B2', 'C2', 'D2', 'E2'],

diff --git a/docs/content/guides/cell-features/merge-cells/javascript/example1.ts b/docs/content/guides/cell-features/merge-cells/javascript/example1.ts
@@ -10,7 +10,7 @@ const data: string[][] = new Array(100) // number of rows
   );
 
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   height: 320,
   colWidths: 47,

diff --git a/docs/content/guides/cell-features/selection/javascript/example1.ts b/docs/content/guides/cell-features/selection/javascript/example1.ts
@@ -3,7 +3,7 @@ import 'handsontable/dist/handsontable.full.min.css';
 
 const selectOption = document.querySelector('#selectOption');
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
     ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],

diff --git a/docs/content/guides/cell-features/selection/javascript/example2.ts b/docs/content/guides/cell-features/selection/javascript/example2.ts
@@ -4,7 +4,7 @@ import 'handsontable/dist/handsontable.full.min.css';
 const output = document.querySelector('#output');
 const getButton = document.querySelector('#getButton');
 const container = document.querySelector('#example2');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
     ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],

diff --git a/docs/content/guides/cell-features/selection/javascript/example3.ts b/docs/content/guides/cell-features/selection/javascript/example3.ts
@@ -3,7 +3,7 @@ import 'handsontable/dist/handsontable.full.min.css';
 
 const button = document.querySelector('#set-data-action');
 const container = document.querySelector('#example3');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
     ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],

diff --git a/docs/content/guides/cell-features/text-alignment/javascript/example1.ts b/docs/content/guides/cell-features/text-alignment/javascript/example1.ts
@@ -10,7 +10,7 @@ const data: string[][] = new Array(100) // number of rows
   );
 
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   colWidths: 100,
   height: 320,

diff --git a/docs/content/guides/cell-functions/cell-renderer/javascript/example4.ts b/docs/content/guides/cell-functions/cell-renderer/javascript/example4.ts
@@ -30,7 +30,7 @@ const data: Book[] = [
 ];
 
 const container = document.querySelector('#example4');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   colWidths: [200, 200, 200, 80],
   colHeaders: ['Title', 'Description', 'Comments', 'Cover'],

diff --git a/docs/content/guides/cell-functions/cell-renderer/javascript/example5.ts b/docs/content/guides/cell-functions/cell-renderer/javascript/example5.ts
@@ -15,7 +15,7 @@ function customRenderer(instance, td) {
   }
 }
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   height: 'auto',
   columns: [
     {},

diff --git a/docs/content/guides/cell-functions/cell-validator/javascript/example1.ts b/docs/content/guides/cell-functions/cell-validator/javascript/example1.ts
@@ -17,7 +17,7 @@ const emailValidator = (value, callback) => {
   }, 1000);
 };
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     { id: 1, name: { first: 'Joe', last: 'Fabiano' }, ip: '0.0.0.1', email: 'Joe.Fabiano@ex.com' },
     { id: 2, name: { first: 'Fred', last: 'Wecler' }, ip: '0.0.0.1', email: 'Fred.Wecler@ex.com' },

diff --git a/docs/content/guides/cell-types/password-cell-type/javascript/example3.ts b/docs/content/guides/cell-types/password-cell-type/javascript/example3.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example3');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },
     { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example1.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example1.ts
@@ -11,7 +11,7 @@ const data: (string | number)[][] = [
   ['2021', 10, 11, 12, 13, 15, 16]
 ];
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   startRows: 5,
   startCols: 5,

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example10.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example10.ts
@@ -18,6 +18,6 @@ const settings = {
   licenseKey: 'non-commercial-and-evaluation'
 };
 
-const hot = new Handsontable(container, settings);
+const hot: Handsontable = new Handsontable(container, settings);
 
 hot.setDataAtCell(0, 1, 'Ford');
diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example2.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example2.ts
@@ -11,7 +11,7 @@ const data: (string | number)[][] = [
   ['2021', 10, 11, 12, 13, 15, 16]
 ];
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   colHeaders: true,
   minSpareRows: 1,

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example3.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example3.ts
@@ -17,7 +17,7 @@ const data: Person[] = [
   { id: 5, name: 'Michael Fair', address: '' },
 ];
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   colHeaders: true,
   height: 'auto',

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example4.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example4.ts
@@ -15,7 +15,7 @@ const data: Person[] = [
   { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' }
 ];
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   colHeaders: true,
   height: 'auto',

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example5.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example5.ts
@@ -15,7 +15,7 @@ const data: Person[] = [
   { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' }
 ];
 
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data,
   colHeaders: true,
   height: 'auto',

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example6.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example6.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example6');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [],
   dataSchema: { id: null, name: { first: null, last: null }, address: null },
   startRows: 5,

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example7.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example7.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example7');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   data: [
     model({ id: 1, name: 'Ted Right', address: '' }),
     model({ id: 2, name: 'Frank Honest', address: '' }),

diff --git a/docs/content/guides/getting-started/binding-to-data/javascript/example9.ts b/docs/content/guides/getting-started/binding-to-data/javascript/example9.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example9');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   autoWrapRow: true,
   autoWrapCol: true,
   height: 'auto',

diff --git a/docs/content/guides/getting-started/configuration-options/javascript/example1.ts b/docs/content/guides/getting-started/configuration-options/javascript/example1.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example1');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   // configuration options, in the object literal notation
   licenseKey: 'non-commercial-and-evaluation',
   data: [

diff --git a/docs/content/guides/getting-started/configuration-options/javascript/example2.ts b/docs/content/guides/getting-started/configuration-options/javascript/example2.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example2');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   // top-level grid options
   licenseKey: 'non-commercial-and-evaluation',
   data: [

diff --git a/docs/content/guides/getting-started/configuration-options/javascript/example3.ts b/docs/content/guides/getting-started/configuration-options/javascript/example3.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example3');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   // top-level grid options that apply to the entire grid
   licenseKey: 'non-commercial-and-evaluation',
   data: [

diff --git a/docs/content/guides/getting-started/configuration-options/javascript/example4.ts b/docs/content/guides/getting-started/configuration-options/javascript/example4.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example4');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   // top-level grid options that apply to the entire grid
   data: [
     ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],

diff --git a/docs/content/guides/getting-started/configuration-options/javascript/example5.ts b/docs/content/guides/getting-started/configuration-options/javascript/example5.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example5');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   // top-level grid options that apply to the entire grid
   licenseKey: 'non-commercial-and-evaluation',
   data: [

diff --git a/docs/content/guides/getting-started/configuration-options/javascript/example6.ts b/docs/content/guides/getting-started/configuration-options/javascript/example6.ts
@@ -2,7 +2,7 @@ import Handsontable from 'handsontable';
 import 'handsontable/dist/handsontable.full.min.css';
 
 const container = document.querySelector('#example6');
-const hot = new Handsontable(container, {
+const hot: Handsontable = new Handsontable(container, {
   // top-level grid options that apply to the entire grid
   licenseKey: 'non-commercial-and-evaluation',
   data: [

diff --git a/docs/content/guides/getting-started/events-and-hooks/javascript/example1.ts b/docs/content/guides/getting-started/events-and-hooks/javascript/example1.ts
@@ -95,7 +95,7 @@ function log_events(event, data) {
 }
 
 const example1 = document.querySelector('#example1');
-const hot = new Handsontable(example1, config);
+const hot: Handsontable = new Handsontable(example1, config);
 
 document.querySelector('#check_select_all').addEventListener('click', function() {
   const state = this.checked;