Description: Check and radio boxes used inside <form>...</form>
.
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(); }; }); }); }); }); });