jquery - 我有 3 个通过复选框显示的表单 - 如何仅显示使用 jQuery 检查的表单？

Question

所以我正在制作一个供用户发布链接、文本或图像的提要。每个帖子都使用自己的简单形式。到目前为止，我可以使用复选框显示每个表单，但我不知道如何在单击另一个表单时隐藏其他表单。

<!-- ************************ TEXT POST ************************ -->
<%= simple_form_for @tl_text do |f| %>
  <div id="textpost" style=display:none class="hidden">
    <%= f.text_area :content, label: "512 character limit", placeholder: "512 character limit", :rows => 6, :cols => 30 %>
    <%= f.submit "Submit" %>
  </div>
  <input name="text" id="text_checkbox" type="checkbox" value="yes" />Text &nbsp;
<% end %>

<!-- ************************ LINK POST ************************ -->
<%= simple_form_for @tl_link do |f| %>
  <div id="linkpost" style=display:none class="hidden">
    <%= f.input :link, label: "Please enter link here" %>
    <%= f.text_area :content, :rows => 6, :cols => 30 %>
    <%= f.submit "Submit" %>
  </div>
  <input name="link" id="link_checkbox" type="checkbox" value="yes" />Link &nbsp;
<% end %>

<!-- ************************ IMAGE POST ************************ -->
<%= simple_form_for @tl_image do |f| %>
  <div id="imagepost" style=display:none class="hidden">
    <%= f.file_field :image %>
    <%= f.text_area :content, :rows => 6, :cols => 30 %>
    <%= f.submit "Submit" %>
  </div>
  <input name="image" id="image_checkbox" type="checkbox" value="yes" />Image &nbsp;
<% end %>

<script>
  $('input[type="checkbox"]').on('change', function () {
    $('#' + this.name + 'post').slideToggle(this.checked)
    $(this).siblings('input').prop('checked', false);
  });
</script> 

Answer 1

你可以试试这样的

var $checkboxes = $('input[type="checkbox"]');

$checkboxes.on('change', function () {
    $checkboxes.each(function () {
        var $this = $(this),
            $form = $this.prev('div');

        this.checked ? $form.slideDown('slow') : $form.slideUp('slow');
    });
});