你如何在循环中制作单选按钮

Posted 2023-03-14

【中文标题】你如何在循环中制作单选按钮

【英文标题】：how do you make radio like button in a loop

【发布时间】：2020-10-30 03:53:36

【问题描述】：

我想制作一个功能类似于单选按钮的按钮

它叫什么？ 以及如何将单选按钮放在上图中的循环上？

按钮输入必须用 div 包裹，对吗？但是你是怎么做到的

简单来说，我的代码是这样的

<tr v-for="(material, index) in getmaterials" :key="index">
                      <td> index+1 </td>
                      <td> material.product_name </td>
                      <td> material.qty </td>
                      <td> material.price </td>
                      <td> material.budget</td>
                      <td><input type="radio" name="radio_a"></td>
                      <td><input type="radio" name="radio_b"></td>
                      <td><input type="radio" name="radio_c"></td></tr>

【参考方案1】：

如果您只需要无线电输入，则将它们直接放在您的 TD 元素中并给它们命名，以便它们属于同一组：https://developer.mozilla.org/en-US/docs/Web/html/Element/input/radio

<td><input type="radio" id="id" name="name" value="value" checked></td>

如果您希望普通按钮的行为类似于单选输入，请尝试将输入包装在标签中，将标签设置为看起来像按钮，然后隐藏输入。

希望这会有所帮助。

【讨论】：

但可以在索引中多次选择单选按钮？我想要做的是，您只能在对象数组的索引中选择 1

如果我理解正确，那么您需要为所有输入提供相同的名称，以便它们属于同一组，然后一次只能选择一个。

【参考方案2】：

<tr v-for="(material, index) in getmaterials" :key="index">
              <td> index+1 </td>
              <td> material.product_name </td>
              <td> material.qty </td>
              <td> material.price </td>
              <td> material.budget</td>
              <td> A <input type="button">radio button </input> </td>
              <td> B <input type="button">radio button </input> </td>

【参考方案3】：

您只能在表单内的一组同名单选按钮中选择一个单选按钮。因此，每一行上的单选按钮将具有相同的名称。

例如：

<td>
   <input type="radio" id="id_ index+1 " name="name_ index+1 " value="value" checked>
</td>