Custom Tick Marker For Checkbox - jQuery rezvani-checkbox

File Size: 4.14 KB
Views Total: 1088
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Custom Tick Marker For Checkbox - jQuery rezvani-checkbox

rezvani-checkbox is a jQuery plugin for custom checkbox input that allows you to customize the styles and tick marker in a checkbox using any iconic font such as Font Awesome, Material Icons, and etc.

How to use it:

1. In this example, we're going to use the Font Awesome Iconic Font for the custom tick marker when a checkbox is checked.

<link rel="stylesheet" 

2. Put jQuery library and the rezvani-checkbox at the bottom of the webpage.

<script src="" 
<script src="rezvani-checkbox.js"></script>

3. Apply the plugin to the target checkbox input.

<input type="checkbox" class="rezvani">

4. Customize the element for the custom tick marker.


5. To use other iconic fonts, search and replace the 'fas fa-check' with your own icon classes.

if ( !this.attributes.checked ) {
  $this.addClass('fas fa-check'); // Font Awesome Check Icon
  this.attributes.checked = true;
  if (typeof self.options.onCheck === 'function') {
      self.options.onCheck.apply(self.elem, arguments);
} else {
  this.attributes.checked = false;
  $this.removeClass('fas fa-check'); // Font Awesome Check Icon
  if (typeof self.options.onUncheck === 'function') {
      self.options.onUncheck.apply(self.elem, arguments);

6. You can also do something when the checkbox is checked and unchecked.

  onCheck:function (elem){

7. Apply your own CSS styles to the checkbox.

.rezvani {
  /* your styles here */

.rezvani.check { 
 /* your styles here */

This awesome jQuery plugin is developed by Abolfazl2647. For more Advanced Usages, please check the demo page or visit the official website.