如何在不丢失现有值的情况下编辑复选框

Posted 2023-05-09

【中文标题】如何在不丢失现有值的情况下编辑复选框

【英文标题】：How to edit check-boxes without losing existing values

【发布时间】：2018-10-30 05:23:37

【问题描述】：

我正在使用 Rails 构建一个工作应用程序。在创建新公司时，用户可以通过复选框在“公司新页面”中选择与公司相关的福利。在用户尝试更新/编辑与公司相关联的特权之前，此方法运行良好。

当用户尝试编辑特权时，编辑方法会完全删除现有值，即使用户没有在编辑页面中取消选中它们。例如，一家公司有养老金和免费午餐等福利。用户决定对其进行编辑并将健康保险添加到现有的福利中。本例中的 edit 方法删除了养老金和免费午餐，尽管用户没有取消选中养老金和免费午餐，但只保存了健康保险。我想要的是他的编辑/更新方法来保存新的选中值以及已经存在的值，前提是它们没有被取消选中。下面是编辑页面中的示例代码

<% Perk.all.each do |perk| %>
  <input type="checkbox", class="hidden", value="<%= perk.id %>" 
  name="company[perk_ids][]" id="company_perk_ids_<%= perk.id %>"/>
  <label class="category-choice <%= "active" if 
  @company.perk_ids.include? perk.id %>" for="company_perk_ids_<%= 
  perk.id %>">
   <% perk.name %>
  </label
<% end %>

这是我公司控制器中的示例代码

  def edit
    @company = Company.find(params[:id])
  end

  def update
    edit
    @company.update(company_params)
    if @company.update(company_params)
      flash[:notice] = "Company profile successfully updated."
      redirect_to @company
    else
      render :edit
    end
  end

在我的 js 中，我有

$(document).ready(function()
  $(".category-choice").click(function()
    $(this).toggleClass("active");
  );
);

【参考方案1】：

似乎您可能隐藏了实际的复选框，而是根据标签上的active 类显示图像以显示其当前状态。这样做的问题是 active 类没有正确指示框的选中状态（因为当已经选择了一个类别时，您实际上并没有将框设置为选中）。要解决此问题，您需要执行类似的操作

<input type="checkbox" class="hidden" value="<%= perk.id %>" name="company[perk_ids][]" id="company_perk_ids_<%= perk.id %>" <%= "checked" if @company.perk_ids.include? perk.id %> />

如果你的 CSS 不是基于“活动”类，而是基于带有 CSS 之类的复选框的状态，这将是显而易见的

input[type="checkbox"]:checked + label  ...  # style for your checked box label

然后您也不需要 JS，因为单击标签会切换复选框。

【讨论】：

解决方案有效，但还有另一个问题。如果我取消选中所有复选框，它仍会返回现有的复选框。换句话说，复选框数组永远不会为空或为零。我如何确保所有复选框都未选中，它不返回任何内容。

@HakeemBaba 这是标准的 html 表单行为 - 根本不会提交未选中的复选框。要解决这个问题，您需要在复选框 之前包含一个具有相同名称的隐藏输入，以充当默认提交值，如果没有选中任何复选框