скрыть div сначала, затем переключить флажок, чтобы показать и скрыть тот же div

Question

Прямо сейчас у меня есть это назад. Все «> видны, а затем переключаются флажки, а затем скрываются. не скрывать, то показывать.

JS У меня сейчас:

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

Еврорадио файл:

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