JSFiddle - React, Tailwind, and code Playground

by ravi1989

HTML

<script src="https://github.com/nmartynenko/jquery-search-plugin"></script>
<ul>
    <li>
        <input type="radio" id="gender_male" value="male" name="gender" checked="checked" />
        <label for="gender_male">Male</label>
    </li>
    <li>
        <input type="radio" id="gender_female" value="female" name="gender" />
        <label for="gender_female">Female</label>
    </li>

JavaScript

/******************************************

Image Tick v1.0 for jQuery
==========================================
Provides an unobtrusive approach to image
based checkboxes and radio buttons
------------------------------------------
by Jordan Boesch
www.boedesign.com
June 8, 2008


Modified June 25, 2010:
- Radio buttons can have individual images
by Simen Echholt

******************************************/

(function($){

    $.fn.imageTick = function(options) {

        var defaults = {
            tick_image_path: "images/radio.gif",
            no_tick_image_path: "no_images/radio.gif",
            image_tick_class: "ticks_" + Math.floor(Math.random()),
            hide_radios_checkboxes: false
        };

        var opt = $.extend(defaults, options);

        this.each(function(){

            var obj = $(this);
            var type = obj.attr('type'); // radio or checkbox

            var tick_image_path = typeof opt.tick_image_path == "object" ?
                opt.tick_image_path[this.value] || opt.tick_image_path["default"] :
                opt.tick_image_path;

            var no_tick_image_path = function(element_id) {
                var element = document.getElementById(element_id) || { value: "default" };
                return typeof opt.no_tick_image_path == "object" ?
                    opt.no_tick_image_path[element.value] || opt.no_tick_image_path["default"]:
                    opt.no_tick_image_path;
            }

            // hide them and store an image background
            var id = obj.attr('id');
            var imgHTML = '<img src="' + no_tick_image_path(id) + '" alt="no_tick" class="' + opt.image_tick_class + '" id="tick_img_' + id + '" />';

            obj.before(imgHTML);
            if(!opt.hide_radios_checkboxes){
                obj.css('display','none');
            }

            // if something has a checked state when the page was loaded
            if(obj.attr('checked')){
                $("#tick_img_" +...