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>

单选按钮show hide divs无法正常工作

1 个答案: