将简单表单复选框变成切换开关答案

【问题标题】：Turn simple form checkbox into a toggle switch将简单表单复选框变成切换开关
【发布时间】：2016-04-10 13:15:22
【问题描述】：

simple_form_for 中有几个复选框：

<%= f.input :agree, label: "Agree with terms and conditions*" %>

输出以下html：

<div class="form-group boolean optional enrollment_agree">
  <div class="checkbox">
    <input value="0" type="hidden" name="enrollment[agree]">
    <label><input class="boolean optional" type="checkbox" value="1" name="enrollment[agree]" id="enrollment_agree"></label>
  </div>
</div>

我发现了一个漂亮而简单的材料设计切换开关http://codepen.io/chrisota/pen/jWmqvx，它适用于以下html：

<input id="toggle" type="checkbox" class="hide"/>
<label for="toggle"><span class="hide">Label Title</span></label>

我怎样才能让它在 rails 表单中工作？

【问题讨论】：

标签： html css ruby-on-rails simple-form

【解决方案1】：

在表单中添加一个隐藏字段，并在切换发生时使用 javascript 更新隐藏字段的值。

javascript：

$('#toggle').change(function(evt) {
   $('#hidden_field').value = $(this).value();
});

【讨论】：

对，所以基本上还是用纯html，在幕后更新agreement属性。
是的，没错。使用 JS 在点击时设置表单值。