Fancy Radio/ Checkbox
I have written a jQuery Plugin for Fancy Custom Checkbox and Radio-buttons. To make form elements visually more expressive. I required this for one of my project and later on I have rewritten it completely to make it more generic and easier for jQuery Lovers. I am great fan of jQuery and I am inspired by http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ to write this plugin.
It's fairly easy to use just like any other jQuery plugin you just have to write couple of lines of javascript code and add some CSS to your html.
Javascript You need:
$(document).ready(function(){ $(".radio").dgStyle(); $(".checkbox").dgStyle(); });
CSS You need:
.radio { height: 25px; width: 19px; clear:left; float:left; margin: 0 0 3px; padding: 0 0 0 26px; background: url("radio.png"); background-repeat:no-repeat; cursor: default; } .checkbox { height: 25px; width: 19px; clear:left; float:left; margin: 0 0 3px; padding: 0 0 0 26px; background: url("checkbox.gif") no-repeat; cursor: default; text-align:left; } .checkbox input,.radio input { display: none; } .checkbox input.show,.radio input.show { display: inline; } .selected { background-position: 0 -52px; } .block { width: 50%; float: left; } label { padding-left:10px; float:left; text-align:left; }
Here, CSS class which we need to give is not fixed and it can be changed in CSS code and Javascript as well. So in above example it is "radio" and "checkbox", which could be anything you want. The only thing which needs to be taken care of is it has to be consistent in all CSS, Javascript and HTML we generate.
See live demo in action or just download a zip file consisting sample image, js and html code to play with.
Please comment your experience or any enhancement/feature you add to it or wish to have or any bug encountered while using it.
Love to hear back from You..! 
#1 by Andreas Petersson on April 16, 2010 - 6:55 am
Quote
Very nice work! I'll try'em out!
#2 by Burzum on April 22, 2010 - 12:30 am
Quote
Very good, but I have a special case: I have checkbox on my page, I call dgStyle() after loading, it's ok. If I load some checkbox in Ajax I need to recall dgStyle() to create the new checkbox, it's work fine, but the checkbox already created doesn't work anymore.
#3 by matt on January 29, 2011 - 12:07 am
Quote
try looking onto the live method that jquery offers this will help out
#4 by John on May 12, 2012 - 2:12 am
Quote
live method is deprecated in jQuery and I could not find a way to make it or on() (the new preferred method) fix this issue. Basically, if you need to add check-boxes dynamically – it is a problem since dgStyle must be initiated at document ready.
#5 by CutMaster on June 29, 2012 - 8:13 pm
Quote
Here's the solution I've found :
Go to the css, for every line where you find .checkbox, add the same definitions but with .ajaxcheckbox.
For example :
.checkbox span, .checkbox label {
should be converted to
.checkbox span, .checkbox label, .ajaxcheckbox span, .ajaxcheckbox label {
Then, in the page loaded by ajax, the class of your checkboxes must be "ajaxcheckbox" instead of "checkbox".
Finally, initialize the component for ajax with "$('.ajaxcheckbox').dgStyle()".
It works for me
#6 by Gurpreet Singh on April 30, 2010 - 7:11 am
Quote
Hi There,
Great tool, but would love it, if the checkbox gets selected by clicking the text associated with it as well……!!
Thanks
Gurpreet Singh
#7 by Gurpreet Singh on April 30, 2010 - 7:50 am
Quote
Just made the small fix
replace this dgStyle function and then you can select the checkbox/radio button by clicking associated label
dgStyle: function() {
// Initialize with initial load time control state
$.each($(this), function() {
var elm = $(this).children().get(0);
elmType = $(elm).attr("type");
$(this).data('type', elmType);
$(this).data('checked', $(elm).attr("checked"));
$(this).dgClear();
});
$(this).mousedown(function() { $(this).dgEffect(); });
$(this).mouseup(function() { $(this).dgHandle(); });
$(this).each(function() {
var control = $(this);
alert(control.html());
$("label[for*='" + this.id + "']").mousedown(function() { control.dgEffect(); });
$("label[for*='" + this.id + "']").mouseup(function() { control.dgHandle(); });
})
}
Thanks
Gurpreet Singh
#8 by Tristan Smith on June 23, 2010 - 9:16 am
Quote
I have take you code and extended it to have 6 states
/*
USAGE:
$(document).ready(function(){
$(selector).rciStyle();
}
pos-checked-status
0 – false – off
1 – false – over
2 – false – down
3 – true – off
4 – true – over
5 – true – down
*/
// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
rciStyle: function()
{
// Initialize with initial load time control state
$.each($(this), function(){
if($(this).find(‘input’).length>0){
$(this).attr(“spec”,’custom_radiocheck’);
var elm = $(this).find(‘input’).get(0);
$(elm).bind(‘change.rci’,function(){
var leml = $(this).get(0);
var div = $(this).closest(‘[spec=rcihold]‘).get(0);
if($(div).data(‘type’) == ‘radio’)
{
$(leml).rciCheck(div);
$.each($(“input[name='"+$(leml).attr("name")+"']“),function()
{
if(leml!=this)
$(this).rciUncheck(-1);
});
}else{
if($(div).data(“checked”) == true)
$(leml).rciUncheck(div);
else
$(leml).rciCheck(div);
}
});
$(this).children().css(‘display’,'none’);
var elmType = $(elm).attr(“type”);
var elmHeight = $(elm).height();
var elmChecked = ($(this).find(‘input:checked’).length > 0);
$(elm).css(‘display’,'none’);
$(this).data(‘type’,elmType);
$(this).data(‘checked’,elmChecked);
$(this).data(‘height’,elmHeight);
$(this).data(‘over’,false);
$(this).dgClear();
}
});
$(this).mousedown(function() { $(this).rciEffect(); });
$(this).mouseup(function() { $(this).rciHandle(); });
$(this).mouseover(function() {$(this).data(‘over’,true);$(this).rciEffect(); });
$(this).mouseout(function() {$(this).data(‘over’,false);$(this).rciClear(); });
},
rciClear: function()
{
if($(this).data(“checked”) == true)
{
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*3)+”px”});
}
else
{
$(this).css({backgroundPosition:”center 0″});
}
},
rciEffect: function()
{
if($(this).data(“checked”) == true){
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*5)+”px”});
}
else{
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*2)+”px”});
}
},
rciHandle: function()
{
var elm = $(this).find(‘input’).get(0);
if($(this).data(‘type’) == ‘radio’)
{
$(elm).rciCheck(this);
$.each($(“input[name='"+$(elm).attr("name")+"']“),function()
{
if(elm!=this)
$(this).rciUncheck(-1);
});
$(elm).change();
}else{
if($(this).data(“checked”) == true)
$(elm).rciUncheck(this);
else
$(elm).rciCheck(this);
}
},
dgCheck: function(div)
{
$(this).attr(“checked”,true);
if($(div).data(‘over’)){
$(div).data(‘checked’,true).css({backgroundPosition:”center -”+($(div).data(“height”)*4)+”px”});
}else{
$(div).data(‘checked’,true).css({backgroundPosition:”center -”+($(div).data(“height”)*3)+”px”});
}
},
dgUncheck: function(div)
{
$(this).attr(“checked”,false);
if(div != -1){
if($(div).data(‘over’)){
$(div).data(‘checked’,false).css({backgroundPosition:”center -”+($(div).data(“height”)*1)+”px”});
}else{
$(div).data(‘checked’,false).css({backgroundPosition:”center 0″});
}
}
else
$(this).closest(‘[spec=rcihold]‘).data(“checked”,false).css({backgroundPosition:”center 0″});
}
});
#9 by Tristan Smith on June 23, 2010 - 9:48 am
Quote
Now Bug free:
/*
USAGE:
$(document).ready(function(){
$(selector).rciStyle();
}
pos-checked-status
0 – false – off
1 – false – over
2 – false – down
3 – true – off
4 – true – over
5 – true – down
*/
// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
rciStyle: function()
{
// Initialize with initial load time control state
$.each($(this), function(){
if($(this).find(‘input’).length>0){
$(this).attr(“spec”,’rcihold’);
var elm = $(this).find(‘input’).get(0);
$(elm).bind(‘change.rci’,function(){
var leml = $(this).get(0);
var div = $(this).closest(‘[spec=rcihold]‘).get(0);
if($(div).data(‘type’) == ‘radio’)
{
$(leml).rciCheck(div);
$.each($(“input[name='"+$(leml).attr("name")+"']“),function()
{
if(leml!=this)
$(this).rciUncheck(-1);
});
}else{
if($(div).data(“checked”) == true)
$(leml).rciUncheck(div);
else
$(leml).rciCheck(div);
}
});
var elmType = $(elm).attr(“type”);
var elmHeight = $(elm).height();
var elmChecked = ($(this).find(‘input:checked’).length > 0);
$(this).children().css(‘display’,'none’);
$(this).data(‘type’,elmType);
$(this).data(‘checked’,elmChecked);
$(this).data(‘height’,elmHeight);
$(this).data(‘over’,false);
$(this).rciClear();
}
});
$(this).mousedown(function() { $(this).rciEffect(); });
$(this).mouseup(function() { $(this).rciHandle(); });
$(this).mouseover(function() {$(this).data(‘over’,true);$(this).rciHover(); });
$(this).mouseout(function() {$(this).data(‘over’,false);$(this).rciClear(); });
},
rciClear: function()
{
if($(this).data(“checked”) == true)
{
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*3)+”px”});
}
else
{
$(this).css({backgroundPosition:”center 0″});
}
},
rciEffect: function()
{
if($(this).data(“checked”) == true){
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*5)+”px”});
}
else{
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*2)+”px”});
}
},
rciHover: function()
{
if($(this).data(“checked”) == true){
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*4)+”px”});
}
else{
$(this).css({backgroundPosition:”center -”+($(this).data(“height”)*1)+”px”});
}
},
rciHandle: function()
{
var elm = $(this).find(‘input’).get(0);
if($(this).data(‘type’) == ‘radio’)
{
$(elm).rciCheck(this);
$.each($(“input[name='"+$(elm).attr("name")+"']“),function()
{
if(elm!=this)
$(this).rciUncheck(-1);
});
$(elm).change();
}else{
if($(this).data(“checked”) == true)
$(elm).rciUncheck(this);
else
$(elm).rciCheck(this);
}
},
rciCheck: function(div)
{
$(this).attr(“checked”,true);
if($(div).data(‘over’)){
$(div).data(‘checked’,true).css({backgroundPosition:”center -”+($(div).data(“height”)*4)+”px”});
}else{
$(div).data(‘checked’,true).css({backgroundPosition:”center -”+($(div).data(“height”)*3)+”px”});
}
},
rciUncheck: function(div)
{
$(this).attr(“checked”,false);
if(div != -1){
if($(div).data(‘over’)){
$(div).data(‘checked’,false).css({backgroundPosition:”center -”+($(div).data(“height”)*1)+”px”});
}else{
$(div).data(‘checked’,false).css({backgroundPosition:”center 0″});
}
}
else
$(this).closest(‘[spec=rcihold]‘).data(“checked”,false).css({backgroundPosition:”center 0″});
}
});
#10 by Tristan Smith on June 23, 2010 - 2:20 pm
Quote
sorry two errors in the previous code change dgCheck to rciCheck and dgClear to rciClear
#11 by Guy on June 27, 2010 - 10:10 pm
Quote
Hi,
if i change a radio or checkbox selected value with JS. how do i get the visual object to refresh accordingly?
Thanks,
#12 by Rob on July 5, 2010 - 2:07 am
Quote
This is fantastic stuff, but could you possibly tell me how it is possible to still attach jquery events to the newly replaced checkboxes?
Thanks!
#13 by Reda on July 10, 2010 - 11:03 pm
Quote
Hi and thank you very much for this simple & amazing script!!
(
I do have a small question: is it possible to display the box as follow:
Single ???
i can’t manage to get it done that way
thank you so much for your help
#14 by Reda on July 10, 2010 - 11:07 pm
Quote
Oups, the code is gone:
[label class="radio"][input type="radio" id="single" name="marital_status" value="single"] Single[/label]
#15 by christopher on July 21, 2010 - 4:39 pm
Quote
Very impressive plugin. But when I click on a radio button that's already selected it somehow is deselected. looks like the radio buttons are acting more like checkboxes.
this doesn't seem to happen with the Javascript example you posted: http://ryanfait.com/resources/custom-checkboxes-a…
Don't know if it's a bug but I thought it was worth posting.
Thanks again.
#16 by omarcio on August 14, 2010 - 4:27 am
Quote
I would like to do the following effect:
If you click on the radio type button, it won’t be unselected if you click on it again. It means, once you select a radio button, one of them will be always selected.
Somebody knows how to do it??
thanks!
#17 by cwhitaker on August 23, 2010 - 8:39 pm
Quote
I need the same effect as well!
#18 by cwhitaker on August 23, 2010 - 9:02 pm
Quote
I think I have found a solution, Replace dgHandle: with the following.
dgHandle: function()
{
var elm=$(this).children().get(0);
if($(this).data("checked") == true)
$(elm).dgCheck(this);
else
$(elm).dgCheck(this);
if($(this).data('type') == 'radio')
{
$.each($("input[name='"+$(elm).attr("name")+"']"),function()
{
if(elm!=this)
$(this).dgUncheck(-1);
});
}
},
Warning: This may fudge up check boxes, I'm not sure as I haven't tested them.
#19 by iNeo on February 23, 2011 - 10:28 pm
Quote
simply change it dgHandle with the code i have edited
dgHandle: function()
{
var elm=$(this).children().get(0);
if($(this).data("checked") == true)
$(elm).dgUncheck(this);
else
$(elm).dgCheck(this);
if($(this).data('type') == 'radio')
{
$.each($("input[name='"+$(elm).attr("name")+"']"),function()
{
if(elm!=this)
$(this).dgUncheck(-1);
});
}
},
Pingback: 8 jQuery Plugins/Tutorials For Styling Custom Radio Button and Checkbox
#20 by Alex on October 19, 2010 - 9:56 am
Quote
dgHandle: function()
{
var elm=$(this).children().get(0);
if($(this).data("checked") == true)
$(elm).dgCheck(this);
else
$(elm).dgCheck(this);
if($(this).data("checked") == true) // <- !!!!!!! None uncheck active radio !!!!
if($(this).data('type') == 'radio')
{
$.each($("input[name='"+$(elm).attr("name")+"']"),function()
{
if(elm!=this)
$(this).dgUncheck(-1);
});
}
},
#21 by Marius on October 28, 2010 - 5:36 pm
Quote
Here is my solution, the both others didin't work for me.
dgHandle: function()
{
var elm=$(this).children().get(0);
if($(this).data("checked") == true && $(this).data('type') != 'radio') //<- here is the change — && $(this).data('type') != 'radio' —
$(elm).dgUncheck(this);
else
$(elm).dgCheck(this);
if($(this).data('type') == 'radio')
{
$.each($("input[name='"+$(elm).attr("name")+"']"),function()
{
if(elm!=this)
$(this).dgUncheck(-1);
});
}
},
#22 by omarcio on May 23, 2011 - 4:20 pm
Quote
perfect Marius. Thanks a lot!
#23 by James on October 1, 2011 - 6:09 pm
Quote
WOW just when I was about to drop the script, thanks Marius!
#24 by Aqeel on May 22, 2012 - 4:44 pm
Quote
Big Thanks for this fix
#25 by Andrius on September 5, 2012 - 10:24 pm
Quote
Gerai padirbėjai, man to ir trūko
#26 by Mat on November 5, 2010 - 6:30 pm
Quote
Hello,
I would like to call a jquery function on a radio-button change.
Using a standard radio button, my code is the following :
div.mydiv:last input:radio.myinput).change(function () { … }
Could you please help me to adapt this code to make it work with the custom radio-button ?
Thanks in advance!
Mat
#27 by Dmitry on November 7, 2010 - 5:56 pm
Quote
png file checkbox.png in archive is currupted. actually – it's a gif copy
#28 by BruceLee on November 8, 2010 - 9:02 pm
Quote
Hello!
Does somebody use this plugin in ASP.NET. If use this plugin and set enabled to "false" checkbox is not selectable only in IE. Any ideas?
Thanks!
I really appreciate your help.
#29 by JackTheKnife on January 28, 2011 - 3:52 am
Quote
Is it possible to set radio buttons horizontal not vertical?
Thanks
#30 by Sundar on March 24, 2011 - 9:47 am
Quote
This plugin does not work properly with jquery jscollpane plugin when printing dynamic content and showing the jscoll bar.
The code pane.reinitialize(); when called, shows the jscoll but resets the radio button.
#31 by Dharmavirsinh Jhala on March 24, 2011 - 11:52 pm
Quote
Hi Sundar,
Thanks for reporting, I didn’t got a chance to use jQuery jScrollPane plugin so far but I guess if you can make a hack into pane.reinitialize() function or just queue $(“.radio”).dgStyle(); after jScrollPane initialization is complete.
I hope it helps and Sunder I would appreciate if you would share finally how did you resolved the issue.
#32 by patcon on March 27, 2011 - 11:03 am
Quote
Thanks very much! Just downloading to play with this now, but yours still seems to be the best implementation even after all this time
Pingback: mash my media » Checkboxes & RadioButtons for Mobile Experience
#33 by omarcio on May 24, 2011 - 2:07 am
Quote
Just a question…
Anybody knows how to uncheck all the radio/checkbox inputs when the reset button is clicked in a form??
#34 by comp615 on June 2, 2011 - 9:31 pm
Quote
I too had a lot of trouble doing this through the given functions, the below will do it manually (I can't remember if it fits the normal layout of elements or just mine. But give it a shot. Just alter your target as needed
$("input:checked").each( function(index, el) {
$(el).attr("checked",false);
var id = $(el).attr("id");
var label = $("label[for='" + id + "']").removeClass("selected");
$(el).parent().removeClass("selected");
});
#35 by d8niel on May 27, 2011 - 3:16 am
Quote
thanks for this, it proved quite helpful.
one observation: instead of changing the background position of the sprite in the javascript, i changed your plugin to add/remove css classes.
this way, the presentation can be tweaked in the css and not in the script.
for me this makes more sense, and is more manageable and easily understood by folks with differing javascript knowledge.
thoughts?
#36 by Dharmavirsinh Jhala on May 31, 2011 - 11:38 pm
Quote
That's good idea Deniel, You should share your code snippet with us.
Thanks.
#37 by Nick on June 24, 2011 - 4:07 am
Quote
A pretty good execution, however to reach feature parity with native checkboxes, it would need to support tabbing through form elements and clicking the label should check the box.
#38 by Nick on July 2, 2011 - 12:39 am
Quote
Thanks a ton for the script!
#39 by Deepak on July 6, 2011 - 5:49 pm
Quote
Thanks for sharing awosome custom CheckBox and radio UI.
But Does anybody use this plugin in ASP.NET.
When i used in asp.net with datagrid inside update panel its autopostback event not firing at all ????
Thanks!
I really appreciate your help.
#40 by deepak on July 6, 2011 - 6:09 pm
Quote
Awesome Plugin!!!
But it doesn't work with asp.net with ajax. Stop autopostback when clciking on checkbox.
kind help and thanks for ur work.
#41 by Miodrag on July 21, 2011 - 3:18 pm
Quote
I have problems in ASP.NET with jquery 1.6.x. But with all version both 1.4.x and 1.5.x problems have gone.
#42 by Charlie on October 14, 2011 - 8:06 pm
Quote
I also am having a problem with the latest JQuery, the hidden 'inputs' are not receiving a value when checked/unchecked. Works fine on 1.5.x but not 1.6.x
#43 by LEV7n on August 13, 2011 - 6:49 pm
Quote
so why original label with attribute for do not switch to custom check/radio by click?
#44 by darrenshafae on September 1, 2011 - 3:01 am
Quote
This worked pretty well for me, though I had make modifications so that it would work with expandable fields.
#45 by thomi_ch on September 2, 2011 - 4:52 pm
Quote
hey all
i updated fro 1.4.2 to latest jquery 1.6.2 and saw, that this "Fancy Custom Radio-button and Checkbox" plugin don't see/check the checked state of eg. a checkbox. Check this code: http://paste.ubuntu.com/680490/
I tried it out.. with a really simple example.. but the checkbox won't be checked on page load… if you disable $(".checkbox").dgStyle(); the normal behavior works as expected.. here is the code w/o jquery and this plugin: http://paste.ubuntu.com/680493/
any idea? some problems with 1.6.x?
thanks for reply…
#46 by D.E. on September 3, 2011 - 2:28 am
Quote
The plugin works great… I just have a question, though… Is there a way to check a checkbox via JavaScript? I tried calling dgCheck() (for instance: $('#checkboxId').dgCheck()), but it didn't work…
#47 by Kenbuddy on September 13, 2011 - 2:07 am
Quote
To fix the problem of default checked settings not displaying on load, modify the dgStyle function as follows:
dgStyle: function () {
// Initialize with initial load time control state
$.each($(this), function () {
var elm = $(this).children().get(0);
elmType = $(elm).attr("type");
$(this).data('type', elmType);
$(this).data('checked', $(elm).attr("checked"));
$(this).dgClear();
if ($(elm).attr("checked")) {
$(this).dgCheck(this);
}
});
$(this).mousedown(function () { $(this).dgEffect(); });
$(this).mouseup(function () { $(this).dgHandle(); });
},
#48 by thomi_ch on December 16, 2011 - 7:15 pm
Quote
hey Kenbuddy
thanks a lot.. updated the code and my fancy checkboxes are working great..
where is the dev of that jquery plugin, why does he not update his code?
please do it…
thanks
thomi
#49 by jskeel on March 26, 2012 - 8:38 pm
Quote
Thanks Kenbuddy,
That fixed my problem for dynamic data states not populating the check boxes on load. I was wondering though if it was related to older version of jquery – that is using the attr function instead of prop. Current jquery says use prop to get and val to set. Attr is deprecated for this use.
#50 by Dharmavirsinh Jhala on April 20, 2012 - 11:51 pm
Quote
John, you're right with recent version of jQuery 1.7.x, we must use prop instead of attr. I will surely upgrade this plugin.
Thanks for stopping by and letting me know – I really appreciate.
#51 by Elliot on May 30, 2012 - 10:52 pm
Quote
Hi, although your method works i found this easier:
$(this).data('checked',($(elm).attr("checked") === "checked") ? true : false);
as later on true and false are used.
Cheers
#52 by Dean on October 1, 2011 - 6:36 pm
Quote
Why doesn't this work with anything past the JQuery library https://ajax.googleapis.com/ajax/libs/jquery/1.4…. ??
#53 by Dharmavirsinh Jhala on October 23, 2011 - 12:34 pm
Quote
Dean,
You mean past version?
#54 by Dean on October 1, 2011 - 6:52 pm
Quote
I just noticed if you double click them it shows them in a different state but this one doesn't http://ryanfait.com/resources/custom-checkboxes-a… can anyone help me with this issue? Thanks
#55 by pascalotaku on October 5, 2011 - 2:16 pm
Quote
hi
just a thing about this great plugin.
We can't add a new event on the checkbox like oncheck, show or hide a div.
I just add a $(this).trigger('all triger type') in dgCheck and dgUncheck to do the trick.
#56 by Justin on October 28, 2011 - 10:47 pm
Quote
im using this script but only checkboxes are working. ull see no radio data in POST dump after form submission? =(
http://development.damascusapparel.com/contact?pa…
#57 by Dharmavirsinh Jhala on January 15, 2012 - 10:17 pm
Quote
Radio data is available only if you check any radio… Just make sure that.
#58 by Fred on December 14, 2011 - 12:42 am
Quote
Does not work in latest jQuery. I was able to get it to work using 1.3.2m
#59 by Dave on February 1, 2012 - 10:54 pm
Quote
in jquery.custom_radio_checkbox.js
chage in dgCheck and dgUncheck functions…
$(this).attr("checked",true); -> $(this).prop("checked",true);
#60 by Armando on December 21, 2011 - 7:41 am
Quote
Hi there,
First of all, congrats for the plugin.
Now, I have a question. Instead of $(“.radio”).dgStyle(); can we do something like $(“[type]=radio”).dgStyle(); I want the style to be applied to all radio buttons on the page and not only those ones that have the .radio class assigned.
Thanks!
#61 by Ashish on December 22, 2011 - 3:57 pm
Quote
Hey Guys i am new to asp please tell me how can i use this templete with asp controls
#62 by Charles on January 26, 2012 - 9:32 pm
Quote
Is there a way to set the radio button to disabled?
#63 by Josh Reid on February 14, 2012 - 5:33 am
Quote
//##############################
// jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
// By Dharmavirsinh Jhala – dharmavir@gmail.com
// Date of Release: 13th March 10
// Version: 0.8
/*
USAGE:
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
}
*/
var elmHeight = "25";// should be specified based on image size
// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
dgStyle: function() {
$.each($(this), function() {
var elm = $(this).children().get(0);
elmType = $(elm).attr("type");
$(this).data('type', elmType);
// TEST CORRECTLY checked == true
var chkd= $(elm).attr("checked")=="checked"||$(elm).attr("checked")==true ? true : false ;
$(this).data('checked', chkd);
$(this).dgClear();
// LABEL ACCESSIBILITY
var control= $(this);
var eid = $(elm).attr('id');
$("label[for='" + eid + "']").mousedown(function() { $(control).dgEffect(); });
$("label[for='" + eid + "']").mouseup(function() { $(control).dgHandle(); });
});
$(this).mousedown(function() { $(this).dgEffect(); });
$(this).mouseup(function() { $(this).dgHandle(); });
},
dgClear: function()
{
if($(this).data("checked") == true)
$(this).css("backgroundPosition","center -"+(elmHeight*2)+"px");
else
$(this).css("backgroundPosition","center 0");
},
dgEffect: function()
{
if($(this).data("checked") == true)
$(this).css({backgroundPosition:"center -"+(elmHeight*3)+"px"});
else
$(this).css({backgroundPosition:"center -"+(elmHeight)+"px"});
},
dgHandle: function()
{
var elm=$(this).children().get(0);
if($(this).data("checked") == true && $(this).data('type') != 'radio') //<- RADIO CANT BE DESELECTED
$(elm).dgUncheck(this);
else
$(elm).dgCheck(this);
if($(this).data('type') == 'radio')
{
$.each($("input[name='"+$(elm).attr("name")+"']"),function()
{
if(elm!=this)
$(this).dgUncheck(-1);
});
}
},
dgCheck: function(div)
{
$(this).attr("checked",true);
$(div).data('checked',true).css({backgroundPosition:"center -"+(elmHeight*2)+"px"});
},
dgUncheck: function(div)
{
$(this).attr("checked",false);
if(div != -1)
$(div).data('checked',false).css({backgroundPosition:"center 0"});
else
$(this).parent().data("checked",false).css({backgroundPosition:"center 0"});
}
});
#64 by jose on February 21, 2012 - 6:14 am
Quote
great plugin man! save my day. just one thing: i change where it move backgrounds when checked to add and remove class 'checked'. that way i can have bothn states in my main sprite image.
greetings from argentina!
#65 by Debarati on April 13, 2012 - 7:31 pm
Quote
Hi
I am using the http://ryanfait.com/resources/custom-checkboxes-a… custom checkboxes for my application . Its working fine but when I try to selectAll/ClearAll using another normal checkbox its not getting checked until I do a mouseclick on the body. Can you please help me out with this problem as I am new to Jquery.
Thanks
Debarati
#66 by Hercules on June 14, 2012 - 11:44 pm
Quote
Doesn't work within FancyBox.
Can't find solution anywhere.
#67 by Lewis on October 18, 2012 - 2:48 am
Quote
Omg i had to change:
dgCheck: function(div)
{
$(this).attr("checked",true);
$(div).data('checked',true).css({backgroundPosition:"center -"+(elmHeight*2)+"px"});
},
to
dgCheck: function(div)
{
$(this).attr("checked",true);
$(div).data('checked',true).css({backgroundPosition:"center -"+(elmHeight/2)+"px"});
},
else it wouldnt work for me lol
#68 by Cupidvogel` on January 14, 2013 - 7:26 pm
Quote
Hi, what about the license? Can I use it freely, or modify it and use it freely? Do I need to acknowledge this website in any case?
#69 by Dharmavirsinh Jhala on January 17, 2013 - 6:47 am
Quote
Hi you're free to use, modify and distribute. If you acknowledge it will be good that where it is being used. Not on this website but on my email just for my reference – no other purpose.
#70 by Higo on January 18, 2013 - 6:53 pm
Quote
Asp.Net Radio generates a span class around the <input> tag causing the plugin not to work. I altered this to support asp.net RadioButtons:
See the commented code to see the changes.
//##############################
// jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
// By Dharmavirsinh Jhala – dharmavir@gmail.com
// Date of Release: 13th March 10
// Version: 0.8
/*
USAGE:
$(document).ready(function(){
$(":radio").behaveLikeCheckbox();
}
*/
var elmHeight = "25";// should be specified based on image size
// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
dgStyle: function () {
// Initialize with initial load time control state
$.each($(this), function () {
//var elm = $(this).children().get(0);
// Support asp.net radio and checkbox
var elm = $(this).find('input').get(0);
elmType = $(elm).attr("type");
$(this).data('type', elmType);
$(this).data('checked', $(elm).attr("checked"));
$(this).dgClear();
});
$(this).mousedown(function () { $(this).dgEffect(); });
$(this).mouseup(function () { $(this).dgHandle(); });
},
dgClear: function () {
if ($(this).data("checked") == true) {
$(this).css("backgroundPosition", "center -" + (elmHeight * 2) + "px");
}
else {
$(this).css("backgroundPosition", "center 0");
}
},
dgEffect: function () {
if ($(this).data("checked") == true)
$(this).css({ backgroundPosition: "center -" + (elmHeight * 3) + "px" });
else
$(this).css({ backgroundPosition: "center -" + (elmHeight) + "px" });
},
dgHandle: function () {
//var elm = $(this).children().get(0);
// Support asp.net radio and checkbox
var elm = $(this).find('input').get(0);
if ($(this).data("checked") == true)
$(elm).dgUncheck(this);
else
$(elm).dgCheck(this);
if ($(this).data('type') == 'radio') {
$.each($("input[name='" + $(elm).attr("name") + "']"), function () {
if (elm != this)
$(this).dgUncheck(-1);
});
}
},
dgCheck: function (div) {
$(this).attr("checked", true);
$(div).data('checked', true).css({ backgroundPosition: "center -" + (elmHeight * 2) + "px" });
},
dgUncheck: function (div) {
$(this).attr("checked", false);
if (div != -1)
$(div).data('checked', false).css({ backgroundPosition: "center 0" });
else {
//$(this).parent().data("checked", false).css({ backgroundPosition: "center 0" });
// Support asp.net radio
$(this).closest('div.radio').data("checked", false).css({ backgroundPosition: "center 0" });
}
}
});
#71 by Dharmavirsinh Jhala on February 7, 2013 - 8:33 pm
Quote
Sounds cool…Higo. Really appreciate your contribution back to this plugin.
#72 by diego on February 15, 2013 - 9:54 pm
Quote
To solve the ASP.NET span problem. I didnt touch the js file. I just did the following on my jquery ready section
$("form input:checkbox").each(function (index) {
$(this).wrap('<div class="checkboxCss" id="' + $(this).attr('id') + '" />');
});
$(".checkboxCss").dgStyle();
This is, before creating, I add the needed DIV arround it. Note that Im using checkboxCss intead of checkbox for the css class.
What I cant find how to do is, I have a select All link with a click function…but cant seem to make all checkboxes toggle the status… where do I call dgCheck() on?
Thanks, and great work!
#73 by diego on February 25, 2013 - 8:43 pm
Quote
No I have a problem because the DIV has the same ID as the checkbox… when I checked the checked attribute it returns FALSE no matter what the status is. Im using
var isChecked = $('input[name="ctl00$contenido$chkTerminos"][type=checkbox]').attr('checked') ? true : false;
This alert(isChecked); always shows false…. any suggestion?
Thanks!
#74 by diego on February 25, 2013 - 9:59 pm
Quote
Ok, aparently the checked status is not working well….
Using var chkd= $(elm).attr("checked")=="checked"||$(elm).attr("checked")==true ? true : false ; to check,
on load, it gives false (which is correct)
if I check it, it still gives false and when I unchecked it, it says true…
#75 by Dharmavirsinh Jhala on March 29, 2013 - 4:43 pm
Quote
Stackoverflow help for select-all/deselect-all: http://stackoverflow.com/questions/12435963/check…