jquery - 首先隐藏 div，然后切换复选框以显示和隐藏相同的 div

Question

现在我把它倒过来了。所有的 '> 都是可见的，复选框的切换显示然后隐藏。不隐藏然后显示。

我现在有.j​​s：

$(document).ready(function(){ 
    $(".store_checkbox").click(function() {
    $('[store_id='+$(this).val()+']').toggle();
    }); 
});

.erb 文件：

<h3>Stores Offered In</h3>
  <ul class="multi-column-checkbox">
    <% for store in Store.all %>
        <li><%= check_box_tag "idea[store_ids][]", store.id, 
@idea.stores.include?(store), :class => "store_checkbox" %> <%= store.name %></li>
    <% end %>
  </ul>
  <br />

  <h3>Taxonomies Offered In</h3>
  <% for store in Store.all %>
     <% if store.has_taxonomies? %>
     <div store_id='<%= store.id %>'>
        <h4><%= store.name %></h4>
          <ul class="multi-column-checkbox">
            <% for taxonomy in store.taxonomies %>
                <li><%= check_box_tag "idea[taxonomy_ids][]", 
taxonomy.id, @idea.taxonomies.include?(taxonomy) %> <%= taxonomy.name %></li>
            <% end %>
          </ul>
    </div>

我想隐藏 div：

'[store_id='+$(this).val()+']' or    <div store_id='<%= store.id %>'> : in erb file

然后我希望能够单击“store_checkbox”并切换该 div 以显示和隐藏。

Answer 1

尝试

$(document).ready(function () {
    $(".store_checkbox").change(function () {
        $('div[store_id=' + this.value + ']').toggle(this.checked);
    }).change();
});