Custom Tick Marker For Checkbox - jQuery rezvani-checkbox

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.

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.

  • Publication date: 22.05.2018
  • Source