单选按钮显示隐藏 div 无法正常工作

Question

I have done some code for radio button group to show and hide the divs. but this code is not working properly. could you please look into this. Thank you.

<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

I copied and pasted your code, added the jQuery library, and it appears to work fine.

 $(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>