Javascript 如何显示复选框'；选中状态'；在edit.html.erb中

我的rails应用程序中有复选框。在填写表单时，复选框在选中时将颜色更改为蓝色。提交表单并且用户尝试编辑/更新表单后，即使选中复选框“checked color（blue）”，也不会显示该复选框。这使得用户很难更新或编辑复选框

我想让用户在edit.html.erb中看到最初创建表单/记录时选中的复选框的选中（蓝色）状态。 这是new.html.erb中的复选框代码示例

<% 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" for="company_perk_ids_<%= perk.id %>">
<% end %>

在我的css中，我有

 .category-choice {
  background: #CFCFD3;
  padding: 27px 15px 24px 10px;

  &.active {
    background: #51ADCF;
  }
}

在my edit.html.erb中，复选框的示例代码与new.html.erb中的代码相同

<% 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" for="company_perk_ids_<%= perk.id %>">
<% end %>

---

听起来像是TurboLinks的问题。把你的JS改成这个行吗

(function() {
  $(document).on("turbolinks:load", function() {
    $(".category-choice").click(function(){
      $(this).toggleClass("active");
    });
  });
}).call(this);

---

在dom ready上，您可以测试元素是否被选中。因此，根据这一点，你可以

片段：

$（“[id^='job\u perk\u ids\u']”）。关于（'change'，函数（e）{
$（“[id^='job\u perk\u ids\u']”）。不是（这个）。删除ttr（'checked'）；
$（'label[for！='+this.id+']'）.removeClass（'active'）；
var lbl=$（'label[for='+this.id+']'）；
var isChk=$（this）.is（“：checked”）；
toggleClass（函数（idx，类名）{
返回“活动”；
}，isChk）；
});
//准备好了吗
$（“.category choice”）.toggleClass（函数（idx，类名）{
var inpt='#'+$（this.attr（'for'）；
return$（inpt）.is（“：checked”）？“active”：“；
});
。类别选择{
背景：#cfcfd3；
填充：27px 15px 24px 10px；
}
.category-choice.active{
背景：#51adcf；
}

我的标签0：检查过了
我的label1
解决方案不起作用。当我在复选框的“名称”中添加“checked”时，它会选中所有复选框。这不是我想要的。我只想检查受“.active”影响的项目。我不认为您完全理解我的问题，所以我决定更新it@HakeemBaba在您提交表单后，我假设会返回一个新页面。在此页面上，您可以将选中元素的颜色设置为活动。其中活动类可以包含蓝色。很抱歉，我无法理解流程：client-->server-->client.yhh，因此我想知道如何在编辑页面上将选中元素的颜色设置为“活动”？@HakeemBaba为了处理编辑页面上的事件，足以用您的更改事件侦听器替换我的更改事件侦听器。在这种情况下，我对您的“编辑页面”事件一无所知。
(function() {
  $(document).on("turbolinks:load", function() {
    $(".category-choice").click(function(){
      $(this).toggleClass("active");
    });
  });
}).call(this);