阻止多个单选按钮被选中

Question

页面顶部有一个单选按钮，用于显示“未选择供应商”，然后在查询循环中有几个其他单选按钮。

<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>

我遇到的问题是，如果我在循环内选择一个单选按钮，然后选择循环外的单选按钮，则循环内的单选按钮仍然保持选中状态。

我该如何做才能使外部的单选按钮被选择时，内部的单选按钮变为未选中？

希望这样说得清楚明白。

- Alias

---

在同一组具有相同“name”属性的单选按钮中，您只能选择其中一个。您没有这样做的原因吗？ - Explosion Pills

啊，太简单了！没有原因。谢谢。 - Alias

Answer 1

外部和内部单选按钮需要具有相同的名称：

<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">

此外，id属性需要唯一。任何两个HTML元素都不应具有相同的id属性值，因此在循环中使用相同的id将不会产生您预期的效果。

- mrk

Answer 2

HTML的单选按钮通过name属性进行分组。使用相同的name，但不同的id，可以让您找到它们的唯一标识，但仍将它们分组在一起。通过对它们进行分组，您可以确保只有一个给定组中的按钮被选中。

- Ron