Cloning iCheck checkboxes elements

[Ig-R]

Hi, in my project i'm using iCheck and have a lot of checkboxes and radiobuttons. When clone(true,true) to duplicate all elements a new form with all elements appear but events are bind to first form, if i click a checkbox then checkbox from first form will change not in second one. Using clone once more now third form is bind with event to first one and second is working perfect. It will be very good if any ideas about cloning iCheck input boxes will be presented.

[drgullin]

I'll test that.

[jjgumucio]

Any news on this issue? I'm having the same problem. If yu need any help or more information for this problem to be solved just ask!

Thanks in advance (great plug-in btw!)

[MSCAU]

Yes same issue here. Looking for a quick solution or will need to abandon icheck on this project.

[jjgumucio]

What I did to bypass thi problem was to use jquery.clone() [no params] and after the cloning process y re-initialize the icheck plugin. It takes a little while with forms that use lots of radio inputs, but it worked.

Hope it helps

[orivalde]

Hi Joaquim (jjgumucio), you can post your code to re-initialize the icheck plugin? I don't have success with: $("#checkbox").iCheck(); and $("input[type='checkbox'], input[type='radio']").iCheck({checkboxClass: 'icheckbox_square-grey',radioClass: 'iradio_square-aero'})

[jjgumucio]

@orivalde Heres the code I run after running $.clone:

var allRadios = dolly.find(':radio');
allRadios.iCheck({
  checkboxClass: 'icheckbox_square-green',
  radioClass: 'iradio_square-green',
});

** Note that "dolly" is the variable name where the cloned element is stored.

Hope this solves your problem!

[orivalde]

Thank you @jjgumucio. I had another problem that was solved initializing the iCheck plugin after my clone call.

[voitin]

Hi,

I have the same problem but using @jjgumucio solution I get a duplicate button inside the cloned button.

Here's a code snippet after the clone process is finished:

<div style="position: relative;" class="iradio_flat checked">
    <div style="position: relative;" class="iradio_flat">
        <input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="name[]" value="" type="radio">
        <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins>
    </div>
    <ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins>
</div>

The radios work but the cloned radios are under the active ones (1-2px lower).

[jjgumucio]

@doubleb Could you be more specific about the problem?

• Are you cloning the element?
• Where are you adding/inserting/appending the cloned element?

Could you post a javascript snipet for the problem?

[voitin]

@jjgumucio I am cloning a DIV that has a couple of radios/checkboxes, here's the code that I use for this:

$('body').on('click', '.duplicate', function(e) {
        e.preventDefault();
        var clone = $(this).parent().parent().clone();
        clone.insertAfter($(this).parent().parent());
        var allRadios = clone.find(':radio');
        allRadios.iCheck({ checkboxClass: 'icheckbox_flat', radioClass: 'iradio_flat', increaseArea: '20%' });
    });

And this is how I enable iCheck:

$(document).on('icheck', function() { $('input[type=checkbox], input[type=radio]').iCheck({ checkboxClass: 'icheckbox_flat', radioClass: 'iradio_flat', increaseArea: '20%' }); }).trigger('icheck');

UPDATE: I fixed it by also cloning the event handlers ( clone(true) ).

[RenukaB30]

Thanks, same problem occur in my project, this is very helpful.

[masadi]

@voitin How do it?

[jjgumucio]

@masadi Long time without using this plugin but, my 2 cents on it: you should clone a single radio input no a div containing several inputs.

Hope it helps!

[dumyjob]

before clone , use $(obj).iCheck('destroy') remove icheck style, then clone element, last use $(obj).iCheck({...}) re-init icheck style.

[developMediaSoft]

If you already have a clone, there seems there's no other option but to strip iCheck's wrapper, and reinitialize the input. This is how you can do that:

var cloneCheckbox = clone.querySelector('input[type="checkbox"]');
container.replaceChild(cloneCheckbox, clone);
//Call $(cloneCheckbox).iCheck with desired arguments, attach event listeners

Full working example at https://codepen.io/anon/pen/GzvBbx?editors=1010