Skip to content
A light and simple way to custom your form checkboxes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
js
themes
.gitignore
LICENSE
README.md

README.md

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.

You can’t perform that action at this time.