Stop multiple radio buttons being selected

Question

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.

Pyroelectric

You can only select one of a group of radio buttons with the same name .. is there a reason you're not doing that? – Lovmilla

Ah, so simple! Nope, no reason. Thanks. – Pyroelectric

Answer 1

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.

Tailband

Answer 2

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.

Alexalexa