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();
};
});
});
});
});
});