CODEWITHSUNDEEP
formscheckboxradio-button
Clinton Green
Clinton Green

Reputation: 9977

Checkbox is activating radio button

I have a form that lists colors. The user can choose one favorite color via a radio button, then they can choose multiple secondary colors via checkboxes ( in case their favorite color is out of stock)

The problem I'm having is that when I click a checkbox, it also activates the radio button. This does not happen the other way around when I click a radio button.

The fiddle is here, http://jsfiddle.net/clintongreen/ZjwS2/

Thanks for any help, cheers

Upvotes: 0

Views: 205

Answers (2)

jmoerdyk
jmoerdyk

Reputation: 5527

It's because the tags are inside the tags. Clicking anywhere on the label selects the radio button, including the checkbox you have inside the as well.

Upvotes: 2

animuson
animuson

Reputation: 54757

This is because you surrounded them both inside a label. The label is being applied to the first input element which is inside it, which is the radio button. The entire label is being used as a shortcut to the radio button, so clicking the checkbox (which is inside the label as well) will activate the label and also the radio button. You need to move the checkbox outside of the label. Perhaps you meant to only enclose the text to the right of the boxes inside the label?

Upvotes: 2

Related Questions