單選按鈕顯示隱藏divs無法正常工作

Question

我已經做了一些單選按鈕組的代碼來顯示和隱藏div。但是這個代碼工作不正常。你可以請看看這個。謝謝。

<div class="col-md-7"> 
     <div> 
      <h3 class="radio_heading">Radio Button Group</h3> 
       <form>        
        <label><input id="rdb1" type="radio" name="toggler" value="1" checked/>Book</label> 
        <label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> 
       </form> 


       <div id="blk-1" class="toHide">  
        <form action="success1.html">  
         Name1:<input type="text" name="name"> 
         <input type="submit" name="submit">  
        </form>  
       </div> 
       <div id="blk-2" class="toHide" style="display:none">  
        <form action="success1.html">  
         Name2:<input type="text" name="name"> 
         <input type="submit" name="submit"> 
        </form> 
       </div> 
     </div> 
    </div> 


$(function() { 
     $("[name=toggler]").click(function(){ 
      $('.toHide').hide(); 
      $("#blk-"+$(this).val()).show('slow'); 
     }); 
    }); 

Answer 1

我複製並粘貼了你的代碼，添加了jQuery庫，它看起來工作正常。

$(function() { 
 
     $("[name=toggler]").click(function(){ 
 
      $('.toHide').hide(); 
 
      $("#blk-"+$(this).val()).show('slow'); 
 
     }); 
 
    });

<div class="col-md-7"> 
 
     <div> 
 
      <h3 class="radio_heading">Radio Button Group</h3> 
 
       <form>        
 
        <label><input id="rdb1" type="radio" name="toggler" value="1" checked/>Book</label> 
 
        <label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> 
 
       </form> 
 

 

 
       <div id="blk-1" class="toHide">  
 
        <form action="success1.html">  
 
         Name1:<input type="text" name="name"> 
 
         <input type="submit" name="submit">  
 
        </form>  
 
       </div> 
 
       <div id="blk-2" class="toHide" style="display:none">  
 
        <form action="success1.html">  
 
         Name2:<input type="text" name="name"> 
 
         <input type="submit" name="submit"> 
 
        </form> 
 
       </div> 
 
     </div> 
 
    </div> 
 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>