iCheck checkboxes not displaying

Question

I can't get the iCheck iCheckbox plugin to display in any browser.

Here is a jSFiddle. iCheck depends on jQuery 1.7+.

http://jsfiddle.net/jmj3M/2/

I have it initialized without any options:

$(".ex-f").iCheck();

As you can see if you inspect the DOM, the input element is being wrapped by the iCheckbox div. Both the <input> and <ins> elements have their opacity set to 0, however.

Changing their opacity via jQuery, you get this: http://jsfiddle.net/buRq7/

Unfortunately, it still does not work. Does anyone have any advice or experience on getting this to work?

I'm using rails 4 and the asset pipeline.

EDIT: I just realized I selected no-library (pure JS) as a framework option in jsFiddle, and it seems to work even without changing the opacity (see: http://jsfiddle.net/buRq7/5/). However, the documentation explicitly says that it depends on jQuery (or Zepto). Switching the framework option to jQuery 1.10.1 leads to the iCheckbox no longer functioning again ... not sure why this is.

Answer 1

just .iCheck() without any parameter won't work. You need the following at least:

 $('input').iCheck({
            checkboxClass: 'icheckbox_minimal-grey',
            radioClass: 'iradio_minimal-grey'
        });

Answer 2

So I was having the same issue, it might be related to newer version of jQuery, but you need to specity the input type with your selector:​

$("input[type='checkbox'], input[type='radio']").iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
});

Answer 3

Choose a skin and import the css for selected one:

<link href="http://fronteed.com/iCheck/skins/all.css" rel="stylesheet"> 
<script src="http://fronteed.com/iCheck/icheck.js"></script>

and to load the iCheck you can use, for example:

$(".ex-f").iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
});

Check it at: http://jsfiddle.net/a4p6kjb9/

Answer 4

I noticed also that using wrong css file and not including the correct png can cause this iCheck not to work properly.

So the css file you choose must correspond to the checkboxClass and radioClass you set.