Question

场景：我有一个带有radiobuttons的下拉列表，不需要选择提交表单，在我选择了一个选项之后，从那里就不可能取消选择它。我想以某种方式成为可能。

解决方案的想法： 1）实现一些功能，使您可以取消选择单选按钮，就像一个复选框。这似乎是一个糟糕的主意。

2）在下拉列表中添加'reset radiobutton'选项，该选项在选中时重置radiobuttons。

3）添加'reset all radiobuttons'按钮。可能是页面上的所有下拉菜单。

4）在下拉列表中创建一个“占位符”选项，该选项不执行任何操作。这里的问题是，如果我已经选择了X并提交了表单，如果我稍后选择选择占位符，那么在选择X时保存的任何数据都必须还原。

到目前为止，我认为选项2是最好的，但想听听你的想法。这是我现在正在使用的代码：

<% form.inputs do %>
      <% @account.account_preference.editorial_attributes.each do |key, value| %>
        <%= account_pref.input "editorial_#{key}".to_sym, :as => :radio, :collection => (options_for(Editorial, key.to_sym) + option_text_and_value("Reset radiobuttons")), :wrapper_html => { :class => "compact" }, :label => key.titleize  %>
      <% end %>

其中options_for（Editorial，key.to_sym）收集实际执行某些操作的选项，而option_text_and_value（“Reset radiobuttons”）应该添加另一个选项，然后我可以链接到取消选中radiobuttons的功能。这并不像预期的那样工作，因为option_text_and_value返回两个选项而不是一个。我试图在apidock上搜索一些其他选项方法但尚未找到一个。这不是主要问题，但如果有人知道这些和评论，我将非常感激。

所以要把它包起来：你认为哪种方式最好？

此致埃米尔

Answer 1

我不知道你为什么要把单选按钮放在下拉列表中。这对用户来说听起来很混乱。为什么不直接选择下拉选项？这是业务要求吗？

如果你绝对必须这样做，我认为选项2是你提出的最好的选项，虽然我不知道它是否需要成为下拉列表中的一个选项。它可能更好地作为列表旁边或下面的链接或按钮。列表和链接（或按钮）应位于包含div中，以便在页面上有多个下拉列表的情况下，可以轻松找到相应的下拉列表。从那里可以很容易地将一些javascript附加到链接（或按钮），这将取消选择列表中的所有单选按钮。

但是我仍然建议在下拉列表中使用单选按钮从用户的角度看是不好的设计，我不知道这会实现什么。

Answer 2

单选按钮用于从一组选项中选择一些内容。每当我看到一组没有选中的单选按钮时，我想任何设计它的人都不会理解单选按钮。也许你需要添加一个“以上都没有”的单选按钮？

Answer 3

实际上我遇到了类似的问题，肯定有时需要取消选择由单选按钮构建的表单元素。

目前我正在制作一个只有少数必填字段（思考问卷）的多步骤表单，用户可以返回到表单中的上一页，允许取消选择之前填写的答案单选按钮。

问题不在于取消选择单选按钮，这可以通过在元素上悬挂一些jQuery并通过其事件控制它来轻松完成，但Rails在发布表单数据方面过于聪明，遗漏了没有值的字段，因此在数据库中没有将值更新为nil，当我退回到表单中时，我将使用最初选择的值。

所以我想要做的是为单选按钮字段设置一个模型方法，当没有为特定页面提交任何内容时（每个特定的单选按钮字段都存在），将清空值。

至于你原来的问题：只需为你的单选按钮控件创建一个jQuery单击事件（通过HTML类），然后单击你检查是否单击了选项值，是否设置了checked ='checked'，如果是，则删除选中的选项，它应该取消选择（理论上）。

Answer 4

我同意@davidkovsky 的回答。但是我使用这个提示来实现 rails 单选按钮的切换功能。我们可以使用相同的键添加一个隐藏的单选按钮，并在我们点击一个已经选中的单选按钮后检查它。

<div style="display:none"> 
    <%= form.radio_button :key_1, id:"hiddenselector"  %>
</div>

<%= form.radio_button :key_1, class: "key1selector" %>

$(document).on('click', '.key1selector', function() {
    if($(this).hasClass('checked')){
      $(this).prop('checked', false);
      $('#hiddenselector').prop('checked', true);
      $('#hiddenselector').attr('checked', 'checked');
    }else{
      $(this).prop('checked', false);
      $(this).addClass('checked');
    }
});

添加“取消选中单选按钮”的最佳方式 - Rails中的功能？

4 个答案: