单选按钮隐藏和显示问题

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

请检查小提琴。看起来你没有包含jquery js文件。

Answer 2

使click事件在单选按钮中更改事件。

我已经更新了小提琴检查出来 Here is the updated fiddle