如果选中复选框，则显示其余表格

Question

我查看了几个不同的 SO 答案 (show rest of a form if a checkbox is ckecked in ruby on rails)，但没有一个对我有用。

还有其他答案，但我对 jQuery 或 JS 并不精通，其余的都是假设性的。在任何一种情况下，我都完美地遵循了链接问题的示例答案，但是，当复选框被选中时，表单的其余部分没有出现。

想法？

身体

      <div class="form-group" id="checkbox">
        <%= f.check_box :paydeliver %>
        <%= f.label :paydeliver, "Pay $25" %>
      </div>

      <div id="delivery" style="display:none;">
        <div class="form-group">
          <%= f.label :addysdeliver, "Delivery address"%>
          <%= f.text_field :addysdeliver, class: "form-control"%>
        </div>
      </div>

      <%= f.submit "Go!", class: "btn btn-primary btn-large btn-block" %>

      <% end %> #end of form

我尝试过的脚本（来自链接的 SO 答案）但失败了......请随意改进其中的任何一个或全部！

<script>
window.onload = function() { 
 var checkbox = document.getElementById('checkbox');
 if (checkbox.checked) {
 document.getElementById("delivery").style.display = "block";
 } else {
 document.getElementById("delivery").style.display = "none";
 }
};

<script>
window.onload = function() { 
var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery');
checkbox.change = function() {
   if(this.checked) {
     delivery_div.style['display'] = 'block';
   } else {
     delivery_div.style['display'] = 'none';
   }
};

<script>
$('select#paydeliver').change ->
  if $(this).val() == 'true'
    $('delivery').slideDown('fast')
  else
    $('delivery').slideUp('fast')

<script>
$("input[type='checkbox']#paydeliver").on('change', function(){
$('delivery').toggle();
});
</script>

请注意，对于上述每种方法，我还尝试在 ID 元素前添加 # 符号，例如 ('#delivery') 而不是 ('delivery')。还是没有运气！

编辑

@emilioicai 肯定得到了问题的正确答案，但这样做也让我意识到一些更复杂的事情。对于每个控制器，在发布此表单后，用户将被重定向到编辑视图，因此如果他们愿意，他们可以进行更改。他们刚刚输入的表单中的所有数据都会保留在编辑视图中（包括选中的框），但如果选中该框应该出现的字段除外。

这就是为什么我试图将 JS 中的 if (condition) 更改为基于复选框是否显示“True”而不是仅选中它。其他想法表示赞赏！

Answer 1

那里有几个错误的地方。主要的一个是 id 应该在复选框中。不在 div 中。像这样的：

  <div class="form-group">
    <input id="checkbox" type="checkbox">
  </div>

  <div id="delivery" style="display:none;">
    <div class="form-group">
      HIDDEN
    </div>
  </div>



var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery');
checkbox.onclick = function() {
   if(this.checked) {
     delivery_div.style['display'] = 'block';
   } else {
     delivery_div.style['display'] = 'none';
   }
};

在这里看到它的工作：http://jsfiddle.net/D46Zb/

Answer 2

这将使它持续存在：

  <div class="form-group">
    <input id="checkbox" type="checkbox">
  </div>

  <div id="delivery" style="display:none;">
    <div class="form-group">
      HIDDEN
    </div>
  </div>



var checkbox = document.getElementById('checkbox');
var delivery_div = document.getElementById('delivery');
var showHiddenDiv = function(){
   if(checkbox.checked) {
     delivery_div.style['display'] = 'block';
   } else {
     delivery_div.style['display'] = 'none';
   } 
}
checkbox.onclick = showHiddenDiv;
showHiddenDiv();

Answer 3

如果您只想在页面加载时检查一次，请使用

<script type="text/javascript">

    window.onload = function() {
     if ($('checkbox').is('checked')) {
        document.getElementById("delivery").style.display = "block";
     } else {
        document.getElementById("delivery").style.display = "none";
     }
    };

否则，如果您想在每次单击复选框时都进行检查-

 <script type="text/javascript">
  $(document).ready(function(){
    $('checkbox').click(function(){ 
     if ($('checkbox').is('checked')) {
        document.getElementById("delivery").style.display = "block";
     } else {
        document.getElementById("delivery").style.display = "none";
     }
    });
});