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.

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.