Material Design Style Checkbox Examples

Getting Started

To get started, place the following lines in your web page or application:


   <link rel="stylesheet" href="js/matd_checkbox/src/matd_checkbox.css" type="text/css" media="screen" />
   <script type="text/javascript" src="js/jquery/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="js/matd_checkbox/src/matd_checkbox.min.js"></script>

To use, either initialize the control against an existing HTML checkbox. Or initialize the control with color or other paramters against an existing checkbox.


   $('#test').matd_checkbox(_param);

The examples below cover these in detail.

Examples

Basic use of the MatD Checkbox control

The most basic use is by initializing the control against an existing checkbox. Like so:

   $('#test1').matd_checkbox();

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.

Using an 'indeterminate' visual instead of a check

This isn't a common use case but at times a 'partial' or 'indeterminate' visual indicator is necessary when starting the control. To do that, initialize the control as always using a 'partial:true' parameter.

   $('#test2').matd_checkbox({ 'partial': true });

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.

Setting the checked state after initialization

Because of the animation effect, it works best to control the 'checked state' via the API. Like so:
First initialize the control ...

   $('#test3').matd_checkbox();

Then issue a call to the API and set the check via passing either a true or a false.

   $('#test3').matd_checkbox('go_check',true);

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.

Setting colors

There are two colors for a checkbox. The outline color and the 'active' color when checked. These can be set by passing in a color code via the 'outline_color' and 'clicked_color'.
Here we'll set the 'active' clicked color with a deep red.

    $('#test4').matd_checkbox({ 'clicked_color': '#e10050' });

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.