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.

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.

• javascript
• coldfusion
• radio-button
• dom-events

• 3 You can only select one of a group of radio buttons with the same name .. is there a reason you're not doing that? – Explosion Pills Commented Mar 5, 2013 at 15:41
• Ah, so simple! Nope, no reason. Thanks. – Alias Commented Mar 5, 2013 at 15:46

2 Answers 2

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.

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.