當選中單選按鈕時切換DIV

Question

我試圖使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> 

謝謝您的幫助！

Answer 1

能夠得到與以下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> 

感謝

Answer 2

$("[name=script[all_stores]]").change(function(){ 
     $('#script_stores').toggle();   
    }); 

或

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

     }); 

Answer 3

試試這個：

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

    });