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" 
      href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" 
      integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" 
      crossorigin="anonymous">

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="rezvani-checkbox.js"></script>

3. Apply the plugin to the target checkbox input.

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

$('input.rezvani').RezvaniCheckbox();

4. Customize the element for the custom tick marker.

$('input.rezvani').RezvaniCheckbox({
  tag:'i'
});

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.

$('input.rezvani').RezvaniCheckbox({
  onCheck:function (elem){
    console.log('checked');
  },
  onUncheck:function(){
    console.log('unChecked');
  }
});

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.