CSS Radio Button Problem

I am using the css for fancy radio buttons found here on dynamic drive.

I've got the code inside a pop up box that is a jQuery plugin.  As far as I know this plugin isn't the problem.

Right now the radio buttons appear just fine, but you cannot "check" them.  If you hard code checked="checked" into the radio button the checked circle shows up, but you can't uncheck that radio button.

To see the problem go to this page:   page
Then hover over the broken image (probably not showing) and you'll see a button that says "Wrong Category."
Click the wrong category button
Up will come the box with the HTML and CSS.

So any ideas as to how i can get the radio buttons working like they are on Dynamic Drive?

Thanks for the help!
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

>>>As far as I know this plugin isn't the problem.

The probability that the problem is a conflict with the plugin is about 90%.  Plugins like that have very little respect for the snippets like what you are using.  Try using the code without the plugin.  If it works then there is a conflict.  If there is a conflict then you are going to have to go through the plugin code to fine where it is damaging the integrity of the radio code.

Tom BeckCommented:
I don't see font-awesome loaded anywhere on that page. You should have this or something equivalent in the head of the page.
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

Open in new window

The plugin uses font-awesome for the dots and check marks for their radio and checkbox controls. I know that because the plugin page you cited says this:
Note: The check mark seen inside the checkbox replacement is a CSS icon font from Font Awesome. We specify the unicode of the desired font symbol inside our CSS to show it
ElxnbossAuthor Commented:

It does say that for the check mark for the checkbox, but I didn't see it say anything about the radio buttons.  I also get the blue dot to show up inside the outer blue dot when i hard code check="checked" into the radio button.  Its there now you should be able to see it.  

That said I'm assuming since it shows with the hard code that I have everything I need.

I'll try to see if the plugin is really the problem, but any further help would be appreciated!

ElxnbossAuthor Commented:
Well the problem was not with the plugin and it seems the HTML was a bit off, I didn't copy it exactly and I thought I didn't have to include a for attribute.  But when I did copy it exactly it worked just fine.

Thanks for the help.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ElxnbossAuthor Commented:
The problem was with the HTML and I don't think anyone said this was the issue so I'm choosing this as the solution.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.