Apply iCheck (jQuery plugin) to dynamically created CheckBoxes

Question

I use the fantastic iCheck plugin to style my checkboxes in my form.

With the plugin, I am able to just call $('input').iCheck() to apply the desired look and functionality.

However, I am stuck at calling the .iCheck() function on dynamically created checkboxes.

In an ajax call, I build my checkboxes as follows in the success function; This is in an $.each block but for simplicity purposes, I've only included code within the statement.

var chk = $('<div><input id="' + n.ID + '" type="checkbox" name="lblChk"><label for="' + n.ID + '">' + n.Title + '</label></div>');
el.append(chk);

Where el is a div with the id of container that already exists in the DOM tree and n is my object returned as JSON

After building the checkboxes and I call $('#container input').iCheck(); obviously I get nothing special but standard checkboxes. I presume it is because the checkboxes are created dynamically and after the .iCheck() is called. But even after I create checkboxes and call .iCheck() the result is the same.

Can anyone guide me on this?

See the bottom answer and comment here: http://stackoverflow.com/questions/6068955/jquery-function-after-append. Hopefully this helps. — Yatrix, Apr 24 '13 at 16:51
@Yatrix thanks for the response but which answer are you mentioning? Is it the one with the setTimeout() option?? — Subliminal Hash, Apr 24 '13 at 16:59
Yeah, but that is a very dirty solution. You do not know when the ajax call will complete, hence calling setTimeout which happens to get called before the success or complete event is a risk I do not intend to take :) — Subliminal Hash, Apr 24 '13 at 17:14
Did you find a solution? If not, could you please provide the complete code? — Linus Caldwell, May 07 '13 at 18:18

score 13 · Answer 1 · edited Sep 02 '13 at 14:44

13

Try this

$('#container').iCheck({checkboxClass: 'icheckbox_flat-green',radioClass: 'iradio_flat-green'});

edited Sep 02 '13 at 14:44

answered Sep 02 '13 at 14:22

Felipe Mala

131
1
2

score 7 · Answer 2 · answered Dec 17 '15 at 08:44

Also there is another situation ... when iCheck has Callbacks

This code won't work for the ajax-loaded inputs, since it's a replacement of bind():

$('#mycheckbox').on('ifChecked', function(event) {
    alert();
});

Delegated events should be used instead:

$(document).on('ifChecked', '#mycheckbox', function(event) {
 alert('done'); 
});

rahul maindargi · Answer 3 · 2013-05-08T09:40:34.180

5

Try this...

$('#container').find('input').iCheck();

have you tried checking length of $('#container input')? I am not sure but input is not the direct child of container so might not be found with selector $('#container input').

edited May 08 '13 at 09:40

answered Apr 24 '13 at 17:17

rahul maindargi

5,359
2
16
23

1

`$('#container input')` selects each `` inside `#container`, no matter if it is a direct child. Direct children would be selected the same like in css with `$('#container > input')`. – Linus Caldwell May 07 '13 at 18:23
what if I have an ifToggled Callbacks attached to each input ... how do I initiate that also ??? – Florin Dec 17 '15 at 08:39
@Florin can you elaborate more? or better ask separate question if you have different scenario. cant see anytihng related to ifToggled in question. ... if its some kind of event... see live() or on() methods in Jquery. – rahul maindargi Dec 18 '15 at 11:23

score 3 · Answer 4 · edited May 23 '17 at 12:34

Well, I had a similar problem sometime ago and solved it like this:

Assuming that the el variable is a jQuery element I'll bind the plugin iCheck's initialization to the el's fully load, so:

This code should be placed after AJAX appends data

el.ready(function() {
  $('#container input').iCheck({
    checkboxClass: 'icheckbox_flat-green',
    radioClass: 'iradio_flat-green' // If you are not using radio don't need this one.
  });
});

Remember to adapt the code to the particularities of your HTML structure. Running the above code just after the elements are appended to the page you are initializing the iCheck of these newly added elements, however if you are using the iCheck callbacks, the plugin will only work if you declare these callbacks correctly, delegating the events to the appropriate tags just as Florin warned.

This code should be placed on the iCheck first initialization

$(document).on('ifChecked', '#mycheckbox', function() {
  $(this).addClass('selected');
});

$(document).on('ifUnchecked', '#mycheckbox', function() {
  $(this).removeClass('selected');
});

score 1 · Answer 5 · answered Jul 17 '17 at 23:18

1

Try this:

$('input').iCheck({
     checkboxClass: 'icheckbox_flat-blue',
     radioClass: 'iradio_flat-blue'
});

if you want to set from specific div try this:

$('#MyDivId input').iCheck({
      checkboxClass: 'icheckbox_flat-blue',
      radioClass: 'iradio_flat-blue'
});

Check the documentation on http://icheck.fronteed.com/

answered Jul 17 '17 at 23:18

Eddu Diaz Salazar

11
1

Avoid 'try this' or 'try that'. However, show some example with fiddle is a good idea – capcj Jul 17 '17 at 23:34

score -2 · Answer 6 · edited Jul 05 '17 at 03:35

-2

I just encountered the same problem and the solution is simple: call the iCheck method.

var id = some_id;
var one_row = "<tr><td>...<td><td><input type=\"radio\" class=\"minimal\" id=\"" + id + "\" name=\"" + id + "\">radio1</td></tr>";
// add this row to HTML
// call the initialize method
$('#'+id).iCheck({radioClass: 'iradio_minimal-blue'});

edited Jul 05 '17 at 03:35

Nathan Tuggy

2,237
27
30
38

answered Jul 05 '17 at 03:12

Ke Lu

129
3
16

Apply iCheck (jQuery plugin) to dynamically created CheckBoxes

6 Answers6