首先隱藏div然後切換複選框以顯示並隱藏相同的div

Question

現在我有它倒退。所有的'>都是可見的，複選框的切換顯示然後隱藏。不隱藏然後顯示。

JS現在我有：

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