如何允许用户取消选择意外单击的 Rails 单选按钮？答案

【问题标题】：How can I allow a user to de-select a Rails radio button clicked accidentally?如何允许用户取消选择意外单击的 Rails 单选按钮？
【发布时间】：2019-08-03 07:27:36
【问题描述】：

我有一个 Rails 表单，它允许用户从一组带有复选框的对象中进行选择，还可以选择其中一个作为“主要”选项。然而，并不总是有一个主要的选择，而且现在如果用户不小心点击了一个单选按钮，似乎没有办法让临时用户取消选择它。

<%= form_tag song_part_singer_parts_path(@song, @part) do %>
    <input type="hidden" name="song_id" value="<%= @song.id %>" />
    <table>
        <tr>
            <th>Singer</th>
            <th>Primary?</th>
        </tr>
    <% Singer.active.each do |s| %>
        <tr>
            <td>
                <%= check_box_tag "singer_ids[]", s.id  %>
                <%= s.name %>
            </td>
            <td>
                <%= radio_button_tag "primary", s.id %>
            </td>
        </tr>
    <% end %>
    </table>
    <%= submit_tag "Update" %>
<% end %>

编辑：进一步的研究表明，通过单选按钮的设计，这是不可能的。我也会接受这个问题的其他解决方案。我需要用户能够选择零个或一个选项，但不能选择更多，并在他们犯错时纠正错误。

【问题讨论】：

如何创建一个清除收音机的“重置”按钮？一些东西，也许，比如this Q&A。
如果您不想像@jvillian 建议的那样使用清除选项，也许您可以使用复选框而不是单选按钮并使用 javascript 只允许选中一个复选框

标签： ruby-on-rails

【解决方案1】：

有不同的方法可以解决这个问题：

1) 您可以在 <%= radio_button_tag "primary", nil %> No Primary 某处添加一个额外的空白值单选按钮。

2) 你可以使用一个选择，用一个空白的默认/提示来代替：

    ...
</table>
<%= select_tag "primary", options_from_collection_for_select(Singer.active.all, "id", "name"), prompt: 'No Primary' %>

3) 您可以使用 javascript 来关闭选择：

<td>
    <%= radio_button_tag "primary", s.id %>
    <span class="toggle-label">Clear primary</span>
</td>

<style>
/* hide label when unchecked */
input[type=radio] + span {
  display: none;
}
input[type=radio]:checked + span {
  display: inline;
  cursor: pointer;
}
</style>

<script>
document.addEventListener('click', function(event) {
    if (event.target.matches('.toggle-label')) {
        var td = event.target.parentElement;
        var input = td.querySelector('input')
        input.checked = false
    }
});
</script>

【讨论】：