jquery - 如何编辑复选框而不丢失现有值

Question

我正在使用 Rails 构建一个工作应用程序。在创建新公司时，用户可以通过复选框在“公司新页面”中选择与该公司相关的福利。在用户尝试更新/编辑与公司相关的福利之前，这种方法很有效。

当用户尝试编辑福利时，编辑方法会完全删除现有值，即使用户没有在编辑页面中取消选中它们。例如，一家公司有养老金和免费午餐等福利。用户决定编辑此内容并将健康保险添加到现有福利中。尽管用户没有取消选中养老金和免费午餐，但本例中的编辑方法删除了养老金和免费午餐，并且仅保存健康保险。我想要的是编辑/更新方法除了已经存在的值之外还保存新的检查值(前提是它们未被选中)。下面是编辑页面的示例代码

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

这是我公司 Controller 中的示例代码

  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");
  });
});

Answer 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，因为单击标签会切换复选框。