Переключить DIV, когда радиокнопки отмечены

Я пытаюсь сделать переключатель DIV видимым и невидимым, когда группа переключателей говорит «да» или «нет».

Например, у меня есть список магазинов в DIV, но я хочу, чтобы этот список магазинов был виден только тогда, когда переключатель установлен как да.

Редактировать представление сценария

<div id="script_form_wrapper">
    <%= form_for(:script, :url => {:action => 'update', :id =>@script.id}) do |f| %>
        <div id="script_form_visibility">
            <div class="issue_section_header" align="center">Visibility</div>
            <div class="line-break"></div>
            <div class="standardText"><span class="boldText">All Stores:</span> 
                <%=f.radio_button(:all_stores, true)%> Yes 
                <%=f.radio_button(:all_stores, false)%> No
            </div>
            <br/>
            <div id="script_stores">
                <div class="issue_section_header" align="center">Stores</div>
                <div class="line-break"></div>
                <div class="standardText">
                    <%@stores.each do |store|%>
                        <%= check_box_tag 'script[store_ids][]', store.id, @script.store_ids.include?(store.id), :id => dom_id(store) %>
                        <%= label_tag dom_id(store), store.name, :class => "check_box_label" %><br/>
                    <%end%>
                </div>
            </div>
        </div>
        <div id="script_form">
            <div class="boldText"><%= f.label :name %></div>
            <div><%=f.text_field :name, :size => '94', :maxlength => '70'%></div>
            <div>
                <table width="100%" cellspacing="0">
                    <tr>
                        <td class="boldText"><%= f.label :category_id, "Category" %></td>
                        <td class="boldText" align="right">Show ID Required Field</td>
                    </tr>
                    <tr>
                        <td class="standardText"><%=f.select(:category_id, @categories.collect {|c| [c.name, c.id]}, :selected => session[:admin_category])%></td>
                        <td class="standardText" align="right"><%=f.radio_button(:require_id, true)%> Yes <%=f.radio_button(:require_id, false)%> No</td>
                    </tr>
                </table>
            </div>
            <div class="boldText"><%= f.label :task %></div>
            <div><%= f.text_area(:task, :size => "68x20") %></div>
            <div class="boldText"><%= f.label :expected_results, "Expected Results" %></div>
            <div><%= f.text_area(:expected_results, :size => "68x20") %></div>
            <div align="center"><%= f.submit "Update Script" %></div>
        </div>
    <% end %>
</div>

Печальная попытка Javascript

<script type="text/javascript"> 
$(function() {
    $("[name=script[all_stores]]").click(function(){
            $('#script_stores').hide();
            $("#script_all_stores_"+$(this).val()).show('slow');
    });
 });
</script>

Визуализированный исходный код HTML

<div class="standardText"><span class="boldText">All Stores:</span> 
                <input id="script_all_stores_true" name="script[all_stores]" type="radio" value="true" /> Yes 
                <input checked="checked" id="script_all_stores_false" name="script[all_stores]" type="radio" value="false" /> No
            </div>

Решение

<script type="text/javascript"> 
$(function() {
    if($("#script_all_stores_false").is(":checked")){
       $('#script_stores').show();   
         }else{
       $('#script_stores').hide();    
         }
    $("input[name='script[all_stores]']").change(function(){
        if($("#script_all_stores_false").is(":checked")){
           $('#script_stores').show();   
             }else{
           $('#script_stores').hide();    
             }
    });
});   
</script>

Спасибо вам за помощь!!!


person Kyle    schedule 12.04.2011    source источник


Ответы (3)


Попробуй это:

  $("[name='script[all_stores]']").change(function(){
     if($(this).val()=="true"){
       $('#script_stores').show();   
     }else {
       $('#script_stores').hide();   
     }

  });
person Prakash    schedule 12.04.2011
comment
ничего не сработало, я добавил исходный код визуализированного html div переключателей - person Kyle; 12.04.2011
comment
см. снова, выше изменения - person Prakash; 12.04.2011
comment
Я отредактировал свой исходный пост с помощью javascript, который сработал, спасибо всем. - person Kyle; 13.04.2011

Удалось заставить это работать со следующим javascript

<script type="text/javascript"> 
$(function() {
    if($("#script_all_stores_false").is(":checked")){
       $('#script_stores').show();   
         }else{
       $('#script_stores').hide();    
         }
    $("input[name='script[all_stores]']").change(function(){
        if($("#script_all_stores_false").is(":checked")){
           $('#script_stores').show();   
             }else{
           $('#script_stores').hide();    
             }
    });
});   
</script>

Спасибо

person Kyle    schedule 13.04.2011

person    schedule
comment
ничего не сработало, я добавил исходный код визуализированного html div переключателей - person Kyle; 12.04.2011