What fruits do you like?

What fruits do you like?

What fruits do you like?


What is your favorite one?

What is your favorite one?

What is your favorite one?

Check and radio boxes

Description: Check and radio boxes used inside <form>...</form>.

SPECIAL NOTE

Please pay attention that the eventType option is set to none! All animations and behavior on "change" event are controlled by supplementary JavaScript code.

Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.

WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.

Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool

<!-- Check and radio boxes -->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <form class="checkboxes" action="#">
                <h3>What fruits do you like?</h3>
                <ul class="list-unstyled">
                    <li>
                        <input id="cb1" name="cb1" type="checkbox" checked="checked">
                        <label for="cb1">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-2.svg;
                                size: 30px;
                                style: lines;
                                strokeColor: #444;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsWhenMorph: darker">
                            </div>
                            Apple (initially checked)
                        </label>
                    </li>
                    <li>
                        <input id="cb2" name="cb2" type="checkbox">
                        <label for="cb2">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-2.svg;
                                size: 30px;
                                style: lines;
                                strokeColor: #444;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsWhenMorph: darker">
                            </div>
                            Banana
                        </label>
                    </li>
                    <li>
                        <input id="cb3" name="cb3" type="checkbox">
                        <label for="cb3">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-2.svg;
                                size: 30px;
                                style: lines;
                                strokeColor: #444;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsWhenMorph: darker">
                            </div>
                            Mango
                        </label>
                    </li>
                    <li>
                        <input id="cb4" name="cb4" type="checkbox">
                        <label for="cb4">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-2.svg;
                                size: 30px;
                                style: lines;
                                strokeColor: #444;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsWhenMorph: darker">
                            </div>
                            Cherry
                        </label>
                    </li>
                </ul>
            </form>
        </div>
        <div class="col-md-4">
            <form class="checkboxes" action="#">
                <h3>What fruits do you like?</h3>
                <ul class="list-unstyled">
                    <li>
                        <input id="cb5" name="cb5" type="checkbox">
                        <label for="cb5">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-1.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #2C3A49;
                                strokeColorAlt: #E67E22;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsOnHover: none">
                            </div>
                            Apple
                        </label>
                    </li>
                    <li>
                        <input id="cb6" name="cb6" type="checkbox">
                        <label for="cb6">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-1.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #2C3A49;
                                strokeColorAlt: #E67E22;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsOnHover: none">
                            </div>
                            Banana
                        </label>
                    </li>
                    <li>
                        <input id="cb7" name="cb7" type="checkbox">
                        <label for="cb7">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-1.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #2C3A49;
                                strokeColorAlt: #E67E22;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsOnHover: none">
                            </div>
                            Mango
                        </label>
                    </li>
                    <li>
                        <input id="cb8" name="cb8" type="checkbox">
                        <label for="cb8">
                            <div class="livicon-evo" data-options="
                                name: morph-checkbox-1.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #2C3A49;
                                strokeColorAlt: #E67E22;
                                strokeWidth: 1;
                                eventType: none;
                                tryToSharpen: false;
                                colorsOnHover: none">
                            </div>
                            Cherry
                        </label>
                    </li>
                </ul>
            </form>
        </div>
        <div class="col-md-4">
            <form class="checkboxes toggles" action="#">
                <h3>What fruits do you like?</h3>
                <ul class="list-unstyled">
                    <li>
                        <input id="cb9" name="cb9" type="checkbox">
                        <label for="cb9">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-1.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #aaa;
                                solidColorAction: #00BCD4;
                                eventType: none;
                                tryToSharpen: true;
                                colorsWhenMorph: custom">
                            </div>
                            Apple
                        </label>
                    </li>
                    <li>
                        <input id="cb10" name="cb10" type="checkbox">
                        <label for="cb10">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-1.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #aaa;
                                solidColorAction: #00BCD4;
                                eventType: none;
                                tryToSharpen: true;
                                colorsWhenMorph: custom">
                            </div>
                            Banana
                        </label>
                    </li>
                    <li>
                        <input id="cb11" name="cb11" type="checkbox">
                        <label for="cb11">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-1.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #aaa;
                                solidColorAction: #00BCD4;
                                eventType: none;
                                tryToSharpen: true;
                                colorsWhenMorph: custom">
                            </div>
                            Mango
                        </label>
                    </li>
                    <li>
                        <input id="cb12" name="cb12" type="checkbox">
                        <label for="cb12">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-1.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #aaa;
                                solidColorAction: #00BCD4;
                                eventType: none;
                                tryToSharpen: true;
                                colorsWhenMorph: custom">
                            </div>
                            Cherry
                        </label>
                    </li>
                </ul>
            </form>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-4">
            <form class="radioboxes" action="#">
                <h3>What is your favorite one?</h3>
                <ul class="list-unstyled">
                    <li>
                        <input id="r1" name="radio1" type="radio" checked="checked">
                        <label for="r1">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-1.svg; 
                                style: lines; 
                                size: 30px; 
                                strokeWidth: 2; 
                                strokeColor: #bbb; 
                                strokeColorAction: #333; 
                                colorsWhenMorph: custom; 
                                eventType: none 
                            "></div>
                            Apple (initially checked)
                        </label>
                    </li>
                    <li>
                        <input id="r2" name="radio1" type="radio">
                        <label for="r2">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-1.svg; 
                                style: lines; 
                                size: 30px; 
                                strokeWidth: 2; 
                                strokeColor: #bbb; 
                                strokeColorAction: #333; 
                                colorsWhenMorph: custom; 
                                eventType: none 
                            "></div>
                            Banana
                        </label>
                    </li>
                    <li>
                        <input id="r3" name="radio1" type="radio">
                        <label for="r3">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-1.svg; 
                                style: lines; 
                                size: 30px; 
                                strokeWidth: 2; 
                                strokeColor: #bbb; 
                                strokeColorAction: #333; 
                                colorsWhenMorph: custom; 
                                eventType: none 
                            "></div>
                            Mango
                        </label>
                    </li>
                    <li>
                        <input id="r4" name="radio1" type="radio">
                        <label for="r4">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-1.svg; 
                                style: lines; 
                                size: 30px; 
                                strokeWidth: 2; 
                                strokeColor: #bbb; 
                                strokeColorAction: #333; 
                                colorsWhenMorph: custom; 
                                eventType: none 
                            "></div>
                            Cherry
                        </label>
                    </li>
                </ul>
            </form>
        </div>
        <div class="col-md-4">
            <form class="radioboxes" action="#">
                <h3>What is your favorite one?</h3>
                <ul class="list-unstyled">
                    <li>
                        <input id="r5" name="radio2" type="radio">
                        <label for="r5">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-2.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #333;
                                strokeColorAlt: #039BE5;
                                strokeWidth: 1;
                                eventType: none">
                            </div>
                            Apple
                        </label>
                    </li>
                    <li>
                        <input id="r6" name="radio2" type="radio" checked="checked">
                        <label for="r6">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-2.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #333;
                                strokeColorAlt: #039BE5;
                                strokeWidth: 1;
                                eventType: none">
                            </div>
                            Banana (initially checked)
                        </label>
                    </li>
                    <li>
                        <input id="r7" name="radio2" type="radio">
                        <label for="r7">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-2.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #333;
                                strokeColorAlt: #039BE5;
                                strokeWidth: 1;
                                eventType: none">
                            </div>
                            Mango
                        </label>
                    </li>
                    <li>
                        <input id="r8" name="radio2" type="radio">
                        <label for="r8">
                            <div class="livicon-evo" data-options="
                                name: morph-radio-2.svg;
                                size: 30px;
                                style: lines-alt;
                                strokeColor: #333;
                                strokeColorAlt: #039BE5;
                                strokeWidth: 1;
                                eventType: none">
                            </div>
                            Cherry
                        </label>
                    </li>
                </ul>
            </form>
        </div>
        <div class="col-md-4">
            <form class="radioboxes toggles" action="#">
                <h3>What is your favorite one?</h3>
                <ul class="list-unstyled">
                    <li>
                        <input id="r9" name="radio3" type="radio">
                        <label for="r9">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-2.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #999;
                                solidColorAction: #009688;
                                eventType: none;
                                colorsWhenMorph: custom">
                            </div>
                            Apple
                        </label>
                    </li>
                    <li>
                        <input id="r10" name="radio3" type="radio">
                        <label for="r10">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-2.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #999;
                                solidColorAction: #009688;
                                eventType: none;
                                colorsWhenMorph: custom">
                            </div>
                            Banana
                        </label>
                    </li>
                    <li>
                        <input id="r11" name="radio3" type="radio" checked="checked">
                        <label for="r11">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-2.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #999;
                                solidColorAction: #009688;
                                eventType: none;
                                colorsWhenMorph: custom">
                            </div>
                            Mango (initially checked)
                        </label>
                    </li>
                    <li>
                        <input id="r12" name="radio3" type="radio">
                        <label for="r12">
                            <div class="livicon-evo" data-options="
                                name: morph-toggle-2.svg;
                                size: 40px;
                                style: solid;
                                solidColor: #999;
                                solidColorAction: #009688;
                                eventType: none;
                                colorsWhenMorph: custom">
                            </div>
                            Cherry
                        </label>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>
/************ Check-n-radio *************/
.checkboxes input[type=checkbox],
.radioboxes input[type=radio] {
  opacity: 0;
}
.checkboxes h3,
.radioboxes h3 {
  margin-bottom: 20px;
}
.checkboxes .livicon-evo,
.radioboxes .livicon-evo {
  display: inline-block;
  position: relative;
  top: -1px;
  margin-left: -26px;
}
.checkboxes.toggles .livicon-evo,
.radioboxes.toggles .livicon-evo {
  margin-top: -8px;
  margin-right: 4px;
  margin-bottom: -4px;
}
.checkboxes li label,
.radioboxes li label {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 300;
}
//Check and radio boxes
$(document).ready(function () {
    //resetting all forms
    $('form').each(function() {
        this.reset();
    });
    //using ajaxStop event to be sure that all LivIcons are loaded
    $(document).ajaxStop(function() {
        $('form.checkboxes input[type=checkbox]').each(function () {
            var checkbox = $(this),
                id = checkbox.attr('id'),
                icon = $('label[for='+ id +'] > .livicon-evo');
            //set liviconEvoState for initially "checked" checkboxes
            if ( checkbox.prop('checked') ) {
                icon.liviconEvoState('end');
            };
            //on change behavior
            checkbox.on('change', function () {
                icon.playLiviconEvo({
                    afterAnim: function () {
                        if (checkbox.is(':checked')) {
                            icon.liviconEvoState('end');
                        } else {
                            icon.liviconEvoState('start');
                        };
                    }
                });
            });
        });

        $('form.radioboxes').each(function () {
            var this_form = $(this);
            //set liviconEvoState for initially "checked" radiobox
            this_form.find('input[type=radio]').each(function () {
                if ( $(this).prop('checked') ) {
                    var id = $(this).attr('id'),
                        icon = $('label[for='+ id +'] > .livicon-evo');
                    icon.liviconEvoState('end');
                };
            });
            //on change behavior
            this_form.find('input[type=radio]').on('change', function () {
                var radiobox = $(this),
                    icons = this_form.find('.livicon-evo'),
                    cur_icon = $('label[for='+ radiobox.attr('id') +'] > .livicon-evo')
                if (radiobox.prop('checked')) {
                    if (cur_icon.liviconEvoState() === 'start') {
                        cur_icon.playLiviconEvo(true);
                    };
                };
                icons.not(cur_icon).each(function () {
                    if ($(this).liviconEvoState() === 'end') {
                        $(this).playLiviconEvo();
                    };
                });
            });
        });
    });
});

Categories

Miscellaneous

Share