Rails f.check_box 隐藏/显示 JS

Posted 2023-05-09

【中文标题】Rails f.check_box 隐藏/显示 JS

【英文标题】：Rails f.check_box hide/show JS

【发布时间】：2016-03-23 14:20:48

【问题描述】：

我无法在 Rails 表单中的复选框上隐藏默认标签。我有一个自定义标签，无论我尝试什么，我总是会显示列名。我还尝试将此复选框用作模型提交，还用于触发 div 隐藏/显示事件，但我似乎也无法使其正常工作。

<div class="form-group">
    <label class="col-sm-4 control-label">Minor?:</label>
    <div class="col-sm-8">
        <%= f.check_box :minor %>
    </div>
</div>

这是我的隐藏/显示 js

<script type="text/javascript">
  var checkbox = document.getElementById('customers_minor');
  var details_div = document.getElementById('minor_details');
  checkbox.onchange = function() 
     if(this.checked) 
       details_div.style['display'] = 'block';
      else 
       details_div.style['display'] = 'none';
     
  ;
</script>

编辑/解决方案 我已经弄清楚如何通过将do 添加到标签行来添加自定义标签。 <%= f.check_box :minor do %>Custom Label<% end %>

<label for="customer_minor">
    <input name="customer[minor]" type="hidden" value="0">
    <input id="customer_minor" name="customer[minor]" type="checkbox" value="1">
Custom Label
</label>

【问题讨论】：

如果您也向我们展示生成的 html，将会有所帮助。你确定id 属性是customers_minor 吗？根据您使用的 builder gem 的不同，它可能会有所不同。

我对帖子进行了一些编辑，您可能想查看一下。

应该是customer_minor（单数）而不是customers_minor（复数）。

另外，使用onclick，而不是onchange，因为这是一个复选框，而不是一个文本字段。 onclick 事件相当于 onchange 复选框。

有没有办法在显示后实现平滑的jquery滚动到div？

【参考方案1】：

id 属性的值实际上是customer_minor，而不是customers_minor（单数与复数）。

此外，复选框不会对onchange 事件做出反应，因为它的值不会改变。您应该改用onclick 事件；这也适用于键盘触发的事件（即，使用制表符聚焦并按下空格键）。

【参考方案2】：

隐藏/显示 JS 可以这样解决：

#app/assets/javascripts/application.js
var checkbox    = document.getElementById('customer_minor');
var details_div = document.getElementById('minor_details');

checkbox.onchange = function() 
   if(this.checked) 
     details_div.style['display'] = 'block';
    else 
     details_div.style['display'] = 'none';
   
;

您的id 似乎不正确（您可以see working JSFiddle here）。

--

您还应该确保将 JS 放入资产管道文件中——app/assets/javascripts/application.js 等。

【讨论】：

完美，如何实现对 div 的平滑滚动？

这将是另一个问题，如果您提供链接，我会回答！

对不起，有什么链接？