Checkboxland is a JavaScript library for displaying anything as HTML checkboxes. You can use it to display animations, text, and arbitrary data. It also supports plugins, so you can build more powerful APIs on top of it.

Checkboxland is dependency-free, framework-neutral, and fun! 🙃

checkbox in html, how to make checkbox checked by default in javascript, multiple checkbox in html, checkbox javascript, input typecheckbox checked

How to make use of it:

Install & Download:

# NPM
$ npm install checkboxland --save

1. Import the Checkboxland as an ES module.

import { Checkboxland } from 'checkboxland';

// or from a CDN
import { Checkboxland } from 'https://unpkg.com/checkboxland?module';

2. Import plugins if wanted.

import print from './plugins/print/print.js';
import marquee from './plugins/marquee.js';
import transitionWipe from './plugins/transitionWipe.js';
import dataUtils from './plugins/dataUtils.js';

// Add built-in plugins
Checkboxland.extend(print);
Checkboxland.extend(marquee);
Checkboxland.extend(transitionWipe);
Checkboxland.extend(dataUtils);

3. Create a container by which you need to render the checkbox grid.

<div id="example"></div>

4. Create a brand new Checkboxland instance and decide the dimension of the checkbox grid.

const example = new Checkboxland({ 
      dimensions: '8x8', 
      selector: '#example' 
});

5. Prepare your information in a JS array that consists of 0 (unchecked) and 1 (checked).

const myData = [
      [0,1,1,0,0,1,1,0],
      [1,0,0,1,1,0,0,1],
      [1,0,0,0,0,0,0,1],
      [1,0,0,0,0,0,0,1],
      [0,1,0,0,0,0,1,0],
      [0,0,1,0,0,1,0,0],
      [0,0,0,1,1,0,0,0]
];

6. Render a checkbox grid with the info you present.

example.setData(myData,{
  // the x-coordinate where the text should start on the checkbox grid. Default: 
  x: 0,

  // The y-coordinate where the text should start on the checkbox grid. Default: 0.
  y: 0,

  // if the text data won't fill the whole checkbox grid, you can (0, 1, or 2) which will then be used to fill the leftover areas. 
  fillValue: undefined
});

7. Get the value of a checkbox within the grid. Returns 0 or 1.

example.getCheckboxValue(x, y);

8. Set the checkbox value.

example.setCheckboxValue(x, y, 0 or 1);

9. Get the info.

example.getData();

10. Clear all information.

example.clearData();

11. Use the print plugin.

example.print(text,{

  // character data for a custom font
  font: {},

  //  returns a data matrix for the text instead of updating the checkbox grid
  dataOnly: false,

  // the x-coordinate where the text should start on the checkbox grid. Default: 
  x: 0,

  // The y-coordinate where the text should start on the checkbox grid. Default: 0.
  y: 0,

  // if the text data won't fill the whole checkbox grid, you can (0, 1, or 2) which will then be used to fill the leftover areas. 
  fillValue: undefined
  
})

12. Use the marquee plugin.

example.marquee(data, {

  // repeat the animation
  repeat: false,

  // interval in ms
  interval: 200

  // fill the leftover areas if the scrolling data doesn't fill the whole checkbox grid
  fillValue: 0,

  // callback
  callback: function(){}

})

13. Use the transitionWipe plugin.

example.transitionWipe(newData, {

  // ltr (left-to-right) and rtl (right-to-left)
  direction: 'ltr',

  // interval in ms
  interval: 200

  // fill the leftover areas if the scrolling data doesn't fill the whole checkbox grid
  fillValue: 0,

  // callback
  callback: function(){}
  
})

14. Use the dataUtils plugin.

// actionName:
// invert: inverts the provided matrix
// pad: adds padding around the provided matrix
example.dataUtils(actionName, matrix, {
  top: 0
  bottom: 0
  left: 0
  right: 0
  all: 0
})

15. Get an empty matrix with the scale of the present checkbox grid.

example.getEmptyMatrix({
  // the width & height of the returned matrix
  width: 0,
  height: 0,

  // the value you want to pre-populate the returned matrix with. 
  fillValue: 0
});

Render Anything Using HTML Checkboxes, Checkboxland Plugin/Github, html checkbox value truefalse, html checkbox checked

See Demo And Download