drgullin / icheck Goto Github PK
View Code? Open in Web Editor NEWHighly customizable checkboxes and radio buttons (jQuery & Zepto)
Home Page: http://fronteed.com/iCheck
Highly customizable checkboxes and radio buttons (jQuery & Zepto)
Home Page: http://fronteed.com/iCheck
If I have input with click handler (on('click') or onclick) then after customization it was dissappeared
Creating these controls dynamically server side. Is there anyway to dynamically bind click events or similar through this method?
Click event on a helper element doesn't work as expected.
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
Very often, the need to have multiple states checkbox:
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:
HTML5 allows specifying indeterminate property for checkboxes. It would be great if iCheck also supported it: http://css-tricks.com/indeterminate-checkboxes/
Checkbox without label created with data-iconpos=notext shows two overlapping yet slightly visible checkboxes. The code looks like this
my label
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.
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.
Allow linking inside labels.
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.
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?
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
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
});
});
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.
Hi,
On Chrome with a label we can't uncheck the chexbox.
WORK :
NOT WORK :
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.
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?
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?
Example of the callbacks and methods usage should be added.
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?
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...
Can you make your lib compatible with bower?
Thank you
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?
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
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:
Like this... if an onclick event is attached to my original checkbox, it will continue to work.
What do you think ?
thanks
The checkboxes and radio inputs only receive focus when tapped. When I tap multiple times they 'sometimes' check.
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!
Now iCheck support the "disabled" state but not the "readonly" state ... and I haven't found a workaround.
This can be a feature request ? :)
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
It would be great if you create a light version of the Polaris skin.
We should be able to toggle disabled
state.
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.
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.
are psd's available please, i need the flat blue if its possible, thanks in advance
I've very complicated and long form on ie7 radios jumps everywhere
Tap of label area of "Line skin", cannot work on Android 2.3.5.
Hi,
Can anyone explain how to use this plugin for ajax loaded radio buttons.
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.
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)
How do I align the radio buttons to the center of a table "td" element? Thanks.
Parent selectors are buggy in some cases.
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?
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
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
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>
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);
}
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.