prettyCheckboxes, custom checkbox and radio buttons solution
Jul 28
Here’s another jQuery plugin to add to my “pretty” scripts library.
This is customize you checkboxes/radio buttons. Why use this one instead of another? Because this one keep the default browser behaviors. IE: You press spacebar while the label is highlighted, the checkbox gets checked. It’s something that was missing in the other jQuery plugin I found.
Head over here to the script page
#51 Oct 27 at 13:28
Hi there.
I’m so hard trying to get this to work. How do I change the code to get the button at the bottom?
http://www.trollipetates.co.za/toets.php
Thanx so much.
Deon
#52 Oct 27 at 14:29
Anyone know how to mod this script so that it works with radio button name arrays? I can’t seem to figure it out. Everything I do just breaks it
#53 Nov 03 at 14:04
Great script! I need to disable some checkboxes however, which the script doesn’t support. I guess I’m looking for the minimal css definitions to swap in for the occasional checkbox that I need disable control over; can anyone please assist?
Thanks!
-mcjustin
#54 Nov 03 at 14:40
mcjustin:
I dont think Stéphane is following this script/thread anymore unfortunately.
It is a great script. Wish I could figure out the radio array names issue so I could use it.
#55 Nov 04 at 08:55
@Ahhk: I am still checking the thread, but sadly I’m on a crunch at my job so I don’t have time to look into the issue.
@mcjustin: That’s something that I’ll have to add in the near future.
Thanks!
#56 Nov 04 at 14:15
@Stéphane: Thanks. I FULLY understand the crunch time and will appreciate any help when you do have the time.
#57 Nov 14 at 10:18
@Ahhk: Radio buttons name arrays are now working! Check out the project page http://www.no-margin-for-errors.com/projects/prettyCheckboxes/
#58 Dec 01 at 05:22
I wonder if someone (Stephane?? :-} ) could look at http://zeltus.eu/lionheart.html and tell me what mistake I am making?
Firebug reports
$(”input[type=checkbox],input[type=radio]“).prettyCheckboxes is not a function
I reckon I’m making some elementary error, but for the life of me, I can’t see what it is.
As ever, any help gratefully received…
Cheers
Bill
#59 Dec 02 at 06:31
Please disregard my last. I have been tinkering with the code and hey! It suddenly started working.
So I’m a happy camper
Now to see if I can make it do what I really want it to do!
#60 Dec 16 at 16:10
Just a quick “grammar” comment. I love the look of your web page at:
but thought I should mention a spelling error at the top of the page:
“This script ….. By using this script you wont loose any of the regular inputs usability. …”
It should, of course, be “lose”, not “loose”.
#61 Dec 16 at 16:11
Oops…MY mistake now! I got distracted and forgot to paste in the page address :
http://www.no-margin-for-errors.com/projects/prettyCheckboxes/
#62 Dec 17 at 11:39
@Derek: Thanks for the feedback, it’s fixed!
#63 Dec 19 at 13:36
Stephane,
Great plugin!
I added these rows to make M$ IE6 have the hover effect:
//At the end of the prettyCheckboxes
//Add hover effect for IE 6
if (true || ($.browser.msie && $.browser.version == “6.0″)) {
$label.hover(function() { $(this).find(’span.holder’).toggleClass(’HolderHover’); }, function() { $(this).find(’span.holder’).toggleClass(’HolderHover’); });
}
To the css file I added the class HolderHover:
:
label.checkbox:hover span.holder, label.radio:hover span.holder, .HolderHover
{
top: -21px !important;
}
/* Background position on mouseover */
BTW, Another thing,
When using the prettyCheckboxes in IE 6 (again) in a horisontal ul with some floats in (typically for a form), IE 6 adds a strange top margin for some reason.
Adding position:relative to the prettyCheckbox class fixed it..
Thanks again for a superb plug-in!
Cheers,
Erik
#64 Jan 19 at 08:39
Hi, I really need to disable a couple of radio’s, how do i do that, please help someone
#65 Jan 19 at 16:55
@Tor: It is currently impossible to disable radio buttons / checkboxes. I haven’t had time to work on the plugin in a while. It is on the list of improvement tho.
Thanks!
#66 Mar 02 at 09:47
Hi,
very nice tool, thanks for sharing it!
:
Unfortunately I agree with boudga (Post #23)
Since nobody have answered ti his post, I just repeat it
IE7 doesn’t display the unchecked image when you uncheck the checkbox it displays the hover image instead. even the demo page renders it wrong http://www.no-margin-for-errors.com/projects/prettyCheckboxes/#demo
Has anyone fixed this? How do I fix it?
Is there noone else having this problem?
Thanks for any hint!
#67 Mar 04 at 20:35
@frank: I’ll check it out. I haven’t touch the script in a while.
#68 Mar 25 at 11:39
Hi, very cool code!!!
I had the same problem as Frank (Post #66), to “solve” it, I have disabled the hover effect in IE7 modifying the CSS file:
label.checkbox:hover span.holder,
label.radio:hover span.holder { top: -21px; //top: 0px; }
/* “//top: 0px;” is the new code */
This is not the best solution, of course, but it’s a quick solution.
#69 Mar 25 at 23:33
I got this script set up pretty quick. Works in Safari. However in FF & IE I can tick a checkbox but can’t uncheck it.
Anyone had a similar problem?
#70 Mar 25 at 23:41
Sorted. Had an id on the label the same as the input and a surrounding span. Safari was being super nice.
#71 Apr 01 at 22:18
Hello…I’m working with a website that uses your fantastic plugin. I’m noticing (verified on your demo page) that in IE7, there is a distinct scrolling-down of the page when a user clicks on a radio button. It’s like an anchor in reverse almost.
The amount by which the page scrolls down is not consistent between your demo page and my use-case, but it does seem to be fairly consistent. Have you experienced this on your end? Any ideas for a fix? Much appreciated…for everything. Thanks.
#72 Apr 11 at 12:26
Very cool plugin!
Could you pls show me how to set the check status for an individual checkbox with javascript?
(i have used the following code:
$(”#checkbox-1″).attr(”checked”, false);
$(”#checkbox-1″).checked = false;
but could not set it.)
#73 May 19 at 02:28
We’ve been using this script for some time on one of our browser games.
It’s a great script, however have just come accross a big problem with it.
I’ve not checked checkboxes, however radio buttons do not submit the values in IE8, effectively rendering forms useless.
As MS seam to be forcing IE8 upon unsuspecting Vista users we’ve had to disable the script for the time being.
#74 May 19 at 10:00
@lmtz: You can use $(”#checkbox-1″).trigger(’click’);
@Phil: Do you have a page where I can test this, because it’s working fine in my demos.
Thanks!
#75 May 29 at 09:31
Hi Stéphane Caron!, I congratulate you for your excellent plugin prettycheckboxes, it’s very nice, I use it, and works perfect. But when I want to make a form, with optional element’s, for example when check a checkbox, a javascript element appear (with element.style.display = ‘block’), when I do this, the checkbox dissapear, only displays the label.
Please, can you give me a solution for this?
Thanks in advance.
Peter Sure.
Tha
#76 Jun 12 at 01:44
I think I need an example file.