CODEWITHSUNDEEP
javascriptcoldfusionradio-buttondom-events
Alias
Alias

Reputation: 413

Stop multiple radio buttons being selected

I have one radio button at the top of the page to show 'No Chosen Supplier' and then several other radio buttons within a query loop.

<label>
  <input type="radio" id="nosupp" name="nosupp" onchange="resetSupp(this);">
    No Supplier Chosen
</label>

<cfloop query="supplier"
  <label>
    <input type="radio" id="chk1" name="chooseSupp" onchange="change(this);">
    Chosen Supplier
  </label>
</cfloop>

The problem I am having is, if I select a radio button inside the loop, then select the radio button that is outside the loop, the one inside the loop remains selected at the same time as the one outside.

How do I get it so that when the outside one is selected, the inside one becomes unselected?

Hope this makes sense.

Upvotes: 6

Views: 11074

Answers (2)

mrk
mrk

Reputation: 5117

The outside and inside radio buttons need to have the same name:

<input type="radio" id="nosupp" name="supp" onchange="resetSupp(this);" value="NoSupplier">


<input type="radio" id="chk1" name="supp" onchange="change(this);" value="ADD VARIABLE SUPPLIER TYPE HERE">

Also, id attributes need to be unique. No two HTML Elements should have the same id attribute value, so using the same id in a loop won't do what you expect.

Upvotes: 15

Ron
Ron

Reputation: 918

The name attribute of the HTML radio button groups them. Using the same name, but a different id, will let you find them uniquely but still group them together. By grouping them, you can make sure that only one button from a given group is checked.

Upvotes: 3

Related Questions