drgullin / icheck Goto Github PK

Hello, been using bootstrap for quite a while now, so i decided to add iCheck. iCheck works perfect but breaks down Bootstrap. Botht the jQuery and the Zepto versions :: however i discovered that if you put the zepto version just before jQuery script it could work. Any idea?

Hi,

On Chrome with a label we can't uncheck the chexbox.

WORK :

NOT WORK :

I have a table with about 400 rows, 4 radios in each row.
It takes about 30 seconds to convert them into icheck checkboxes....

While when I reduce a number to 60 rows with 4 radios in each - 1 second is all it takes.

So - something is disproportionately hogging performance there - I have no idea what exactly.... It does work faster in firefox though (10 seconds).... soo. not sure what to make of all tihs...

I've very complicated and long form on ie7 radios jumps everywhere

The checkboxes and radio inputs only receive focus when tapped. When I tap multiple times they 'sometimes' check.

Checkbox without label created with data-iconpos=notext shows two overlapping yet slightly visible checkboxes. The code looks like this
my label

Hi,
Can anyone explain how to use this plugin for ajax loaded radio buttons.

Hi, thanks for the plugin. I'm running into an issue on iOS6 where tapping the label will not uncheck the checkbox. Is there a workaround?

iCheck will not forward events when using event delegation, check this for reference:

Regular inputs:

http://codepen.io/anon/pen/dcIoh

iCheck inputs:

http://codepen.io/anon/pen/ktyvG

iCheck needs to forward those events to the underlying input

Hi,

I have to check in javascript my CHECKBOX...

So i start to do this $('#ID').click(); to perform this...

But it doesn't work...

I see in the plugin that :

if (type == 'click') {
                            return false;

so my event is never fired... and nothing changed...

Why the plugin don't work like this:

• I click my ICHECK checkbox
• this fire the click event of my checkbox
• this click event of the checkbox fire the update of my icheck

Like this... if an onclick event is attached to my original checkbox, it will continue to work.

What do you think ?

thanks

Excellent plugin! I've looked everywhere but couldn't find the PSD files. Would it be possible to make these public so we can add our own colors?

Hi!

I have some inputs which are disabled by default. In somes cases, this disable state is remove (through jQuery in my case). After that, users can check the input, but disabledClass is maintained instead of being removed. Same thing on the other side (not disabled to disabled).

Hope I help you, and thank you for this great project 👍
Ornitier

I've noticed jQuery $('xxx').serialize() can not read the input of checkbox/radio when I'm submitting through $.post() (which shouldn't make a difference).

I have tested running iCheck and disabling iCheck. serialize() is unable to read those variables. However, it works perfectly fine on other input types.

I've worked to try to figure out what is causing the issue. but it seems to be an issue when you do multiple forms on the same page with the same name inputs, thats what I've been able to reproduce.

<form id="form1"><input type="radio" name="test"></form>
<form id="form2"><input type="radio" name="test"></form>

(that is where it seems to have an issue sending the data to serialize.) I have removed iCheck and the setup worked perfectly. If you do one form, it worked fine.

I have to dynamically add checkboxes to a form, so i create the checkbox element, append it to my form and then initialize iCheck on it. This effectively turns the checkbox in an iCheck-style checkbox, but the callbacks are not working.

// Dynamically add a checkbox
$('a.add-checkbox').on('click', function() {
    var input = '<input type="checkbox" id="mycheckbox" name="mycheckbox" />';
    $('form').append(input);

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

// This is not doing anything
$('#mycheckbox').on('ifChecked', function(event) {
    alert();
});

Note: The callbacks DO work on checkboxes that are already in the HTML on page load.

From the tests I have done it looks like if you use the browser back button any selections made are not populated.

Something which is weird as well is that the radio buttons are not populated either, checking the style information on the page submit the buttons are not disabled or hidden so they should be going forward.

I have not been able to track down the issue anyone else come across this?

Revised note it may be an IE issue only?

We should be able to toggle disabled state.

Example of the callbacks and methods usage should be added.

Parent selectors are buggy in some cases.

Very often, the need to have multiple states checkbox:

1. Checked
   2)Unchecked
   3)Disabled
   4)onmousedown
   5)onmouseup

on the demo page, i didn't see this effect(mousedown mouseup) something like default checkbox or radiobutton(without your plugin). You understand my quastion? Sorry for my bad english :(

Look picture first line:

1. we have 3 different states checkbox : normal , onmouseup , onmousedown.

Hi
Your script looks really great but I'm wondering how to get this to work.

I have jquery 1.7 running
I have jquery.icheck.js running.
I have added the start script inside my header.

$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' // optional
  });
});

I want to add my own styles so i just want the div to appear around the input and then hide the input.

But nothing happens. :/
Ok got it to start working with Drupal by changing the script to

jQuery(document).ready(function(){
  jQuery('input').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%' // optional
  });
});

hi,
beautiful beautiful plugin, thank you very much

is there a way to integrate with knockout, because knockout reacts only to normal input changes

thanks in advanced.

Hi,
Beside having standaard checkboxes styled with iCheck
I have about 30 radio buttons that i want to assign different colours to them.

What is the best approach to do this?

Great work in general, really like it.
I noticed that you are using same css for line checkbox and radio. But therefore checkbox is missing hover state while unchecked. I think this can be solved just by adding iradio class and minor css change. Or creating whole new iradio_line, what do you think?

Now iCheck support the "disabled" state but not the "readonly" state ... and I haven't found a workaround.

This can be a feature request ? :)

How can I apply iCheck to checkboxes/radios loaded from ajax?
In a normal HTML page works fine, but if I load this page from ajax, iCheck isn't applied.

I'm using this code :

$('input[type=checkbox], input[type=radio]').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue'
});

Cheers

I am unable to get the value of selected checkbox or radio button and i haven't found any example as well related to this.

Thanks

Tap of label area of "Line skin", cannot work on Android 2.3.5.

are psd's available please, i need the flat blue if its possible, thanks in advance

If I have input with click handler (on('click') or onclick) then after customization it was dissappeared

Hi!

I'm trying to use the plugin, and I've noticed that the radio gets checked by simply focusing the input - $('input:first').focus(). Is there any reason for this to happen, or a recommended workaround?

Hello.

Here is my code. No matter what I do, checkbox is defaulting to stand Jquery style i.e. with tags <div class="ui-checkbox">.... </div>

Can you please point me what I am doing wrong?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="jquery.mobile-1.3.0.min.css" rel="stylesheet"/>
<link href="jquery.mobile-1.3.0.min.css" rel="stylesheet"/>
<link href="jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<link href="jquery.mobile.theme-1.3.0.min.css" rel="stylesheet"/>
<link href="skins/all.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript">
    $(document).ready(function() {
        $('input').iCheck() ;

        $('input').on('ifChecked', function(event){
            alert('hi');
        });
    });
</script>
<title>Untitled Document</title>
</head>

<body>
Hello World
<form>
<label for="abc">My Checkbox</label>
 <input type="checkbox" id="abc" data-theme="a"/>
</form>
<script type="text/javascript" src="../Frameworks/jquery-1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../Frameworks/jquery.mobile-1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="jquery.icheck.js"></script>
</body>
</html>

Call to $.data() without Zepto.data doesn't work with objects.

Thus the call:

      return input.data(_iCheck).o[state + (regular ? '' : 'Class')];

Will evaluate to

      return [object Object].o[state + (regular ? '' : 'Class')];

And property o of that string is obviously undefined, which triggers and error like Uncaught TypeError: Cannot read property 'uncheckedCheckboxClass' of undefined

Please update the doc to mention the need for the Zepto.data addon

Code is found at: https://github.com/fronteed/iCheck/blob/master/zepto.icheck.js#L389

how to write something like

$('#loan_infin_check').on('ifClicked', function(event){

if($('#loan_infin_check').iCheck('check'))
{
  $("#variatie_onder1").val( $("#variatie_onder").val() );
  $("#variatie_onder").val('∞');
  $("#variatie_onder").focus();
$("#loan_infin_check").focus();
}
else
{
$("#variatie_onder").val("");
$("#variatie_onder").val($("#variatie_onder1").val());
$("#variatie_onder").focus();
$("#loan_infin_check").focus();
}
});

also how to uncheck element from other elements example

$("#variatie_onder").keyup(function(){
      if($("#variatie_onder").val() != '∞')
      {
         //$('#loan_infin_check').attr('checked', false);
         $('#loan_infin_check').iCheck('ifChecked');
      }
      else
      {
      $('#loan_infin_check').iCheck('check');
        // $('#loan_infin_check').attr('checked', true);
      }

   });

when you put checkbox or radio inside label element (with for="id" or without) changing element status not working.

when I change your example like this:

<li> <label><input tabindex="1" type="checkbox" id="minimal-checkbox-1"> Checkbox 1</label> </li> <li> <label for="minimal-checkbox-2"><input tabindex="2" type="checkbox" id="minimal-checkbox-2"> Checkbox 2</label> </li>

nothing happens when click on checkbox or label.
I try it in IE, Firefox and Chrome.

Installation doesn't seem to be covered anywhere. From the sample docs it's not clear if I really need to include all 5 of your separate javascript files in the header.

What's the best way to quickly get flat style in another project i have without trying to change all my paths and such around (rails project)

It's a bit confusing…

hi

i tried to modify the png to fit my theme but no luck can you post the source of the png file ?

The issue #23 was resolved, but it caused another issue within. or partly fixed. When something is "checked" on the page load. and you have multiple forms (described in #23), if you move a radio button to another option, the other forms will remove their "checked" states

<form id="form1">
<input type="radio" name="test1" checked>
<input type="radio" name="test2">
</form>
<form id="form2 ">
<input type="radio" name="test1" checked>
<input type="radio" name="test2">
</form>

Example: if I change the radio option on form1 and go look at form2, the "checked" state is lost.

(thank you for fixes the previous issue so quickly)

Hey. I was wondering if it's possible to add 'uncheckedClass' . So that when the plugin initializes it will either add the 'uncheckedClass' or 'checkedClass', depending on the state of the original input.

Also is it possible to have a separate 'checkedClass' and 'uncheckedClass' for radio buttons and checkboxes?

This also means that the callbacks need to be per input type.

Basically this is because I want to use font-awesome classes instead of images.

also, if you have a better solution to use font awesome instead of background images (sprite) then that would be greatly appreciated.

HTML5 allows specifying indeterminate property for checkboxes. It would be great if iCheck also supported it: http://css-tricks.com/indeterminate-checkboxes/

How do I align the radio buttons to the center of a table "td" element? Thanks.

This is a great plugin I'm trying to implement on my little project (in local), but after some attempts (and after carefully read the relative docs) I would need a little help for a simple questions.
Following example is only for explaining purposes (really I've a hundred checkboxes on my form and all them are related to their "hidden div"), I've a simple "onclick" event on a checkbox (to shows/hides a div chained to it):
<input name="some_name" id="some_name" value="1" type="checkbox" onclick="if(this.checked) { jQuery('#hidden_div').slideToggle(800); } else { jQuery('#hidden_div').hide(400); }" />
When an user clicking the checkbox, the validation tool (for example) recognises the checkbox as "checked" but the onclick event doesn't fire.

To avoid to rebuilt all conditions in the "onclick" events it's possible to read dinamically all setted conditions to then fire them with a iCheck callback? (using for example: .attribute('onclick')?) or is a bad idea?.
I'm new on jQuery (I've started to study it only a few days ago) and any help will be really appreciate.

I implemented the setup steps for the blue Line Skin exactly. However, the checkmark and the X mark does not appear automatically on page load. But it starts to work after I go into Chrome Inspector and toggle on/off the element with the background containing those check and X marks... strange.

For my js code I only copied the code underneath Line skin "Usage". Whenever I try to use

$('.test input').iCheck({
  handle: 'checkbox'
});

as specified at the end of the documentation, my input fields simply disappear.

I want to thank you for so beautiful plugin. But it is difficult to set up.

Why have not you made ​​a small guide how to set up? I have spent 2 days with no luck.

Thanks in advance!

Allow linking inside labels.

When input is placed directly inside label and there's one more label inside that label, click on inner label doesn't work as expected.

Click event on a helper element doesn't work as expected.

As seen above, the label is pushed after the div element hence it appears at the bottom. I've disabled all other css files thinking they might be the cause but had no luck.

Is this a bug?

Creating these controls dynamically server side. Is there anyway to dynamically bind click events or similar through this method?

It would be great if you create a light version of the Polaris skin.

Can you make your lib compatible with bower?

Thank you