Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
js
 
 
 
 
 
 
 
 
 
 

Custom checkboxes

A light and simple way to custom your form checkboxes.

How it works

This library hides the checkboxes designated as to be customized, and creates graphic clones from <div> tags. Checked state is synchronized between them.

Project status

This version is the 1.0.0 stable version, this should work smoothly on most browsers.

Installation

  1. Copy this project in your vendor/ directory
  2. Link the styles.min.css CSS between the <head> and closing </head>tags
  <head>
    <link rel="stylesheet" media="screen" href="vendor/custom-checkboxes-master/themes/styles.min.css" type="text/css">
  </head>
  1. Call the custom checkboxes library before the closing </body> tag and call immediately after the custCbx() function:
  <script type="text/javascript" src="vendor/custom-checkboxes-master/js/customCheckboxes_1.0.min.js"></script>
  <script>
    custCbx();
  </script>
</body>

Usage

Add the custCbx class to all checkboxes to customize.

Notice: All checkboxes must have an id.

Notice: Checkboxes can be prechecked.

You can add styling classes:

Manage shape (default: square)

  • custCbx-square custCbx-square
  • custCbx-rounded custCbx-rounded
  • custCbx-round custCbx-round
  • custCbx-tick custCbx-tick
  • custCbx-tick custCbx-cross

Manage animation (default: no animation)

  • custCbx-fading custCbx-fading
  • custCbx-checking custCbx-checking
  • custCbx-checking custCbx-crossing-out

Manage color (default: black)

  • custCbx-black custCbx-black
  • custCbx-grey custCbx-grey
  • custCbx-white custCbx-white
  • custCbx-blue custCbx-blue
  • custCbx-red custCbx-red
  • custCbx-violet custCbx-violet
  • custCbx-green custCbx-green

You can mix shape / animation / color classes as in this example: custCbx-mixed-example

Feel free to edit the styles.css and create your own styles!

Warning: Only one class of each category can be used. In case of multiple classes from a same category, only the first one will be used.

Specific actions

  • custCbxCheckAll(): check all custom checkboxes on the page
  • custCbxUncheckAll(): uncheck all custom checkboxes on the page
  • custCbxStatus(itemId): return the check state of a checkbox

Example

<html>
  <head>
    <link rel="stylesheet" media="screen" href="vendor/custom-checkboxes-master/themes/styles.min.css" type="text/css" >
  </head>
  <body>
    <p>
      <input id="checkbox1" type="checkbox" class="custCbx custCbx-fading">
      <label for="checkbox1">Hit me!</label>
    </p>

    <p>
      <input id="checkbox2" type="checkbox" class="custCbx custCbx-round custCbx-red">
      <label for="checkbox2">Hit me too!</label>
    </p>

    <p>
      <input id="checkbox3" type="checkbox" class="custCbx custCbx-checking" checked>
      <label for="checkbox3">Already checked</label>
    </p>
    
    <script type="text/javascript" src="vendor/custom-checkboxes-master/js/customCheckboxes_1.0.min.js"></script>
    <script>
      custCbx();
    </script>
  </body>
</html>

You can find a full demo here. More details on my blog.

About

A light and simple way to custom your form checkboxes

Resources

License

Releases

No releases published

Packages

No packages published

Languages