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（条件）是基于复选框是否显示“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

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

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

Answer 3

这将使其持续存在：

  <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();

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

3 个答案: