选中单选按钮时切换 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

  $("[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 2

试试这个：

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

  });

Answer 3

能够使用以下 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>

谢谢