Turn off multiple switches

Question

I have one switch at the top of the page to show "No Chosen Supplier", and then several other switches in the 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 that I encountered is that if I select a radio button inside the loop, then we select a radio button that is outside the loop, while inside the loop it remains selected at the same time as outside.

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

Hope this makes sense.

Answer 1

External and internal switches must 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"> 

In addition, id attributes must be unique. No two HTML elements should have the same id attribute value, so using the same id in a loop will not produce the expected result.

Answer 2

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