javascript - 单选按钮隐藏和显示问题

Question

我试图通过选择不同的单选按钮来更改内容。我的代码似乎不起作用。有什么问题吗？这是 FIDDLE :

HTML

   <div id="category-table" style="display: block;">
            <div class="btn-group" data-toggle="buttons" style="float:right;">
                <label class="btn btn-show-category active">
                    <input type="radio" name="options" id="option1" autocomplete="off" value="A-categories" checked=""> A Categories
                </label>

                <label class="btn btn-show-category">
                     <input type="radio" name="options" id="option2" autocomplete="off" value="B-categories"> B Categories
                </label>
        </div>         

        <br><br>
            <div class="all-categories">
                <div class="content-header">Category A</span></div>
            </div>

            <div class="used-categories" style="display:none;">
                <div class="content-header">Category B</span></div>
            </div>

    </div>

JS

$(document).ready(function () {
    $('input[type="radio"]').click(function () {
        if ($(this).attr("value") == "A-categories") {
            $(".used-categories").hide();
            $(".all-categories").show();
        }
        if ($(this).attr("value") == "B-categories") {
            $(".all-categories").hide();
            $(".used-categories").show();
        }
    });
});

有什么建议吗？

Answer 1

只需检查 fiddle 。看起来你没有包含 jquery js 文件。