jquery – 将单选按钮设置为正方形

小提琴中的例子：http://jsfiddle.net/kLGf4/2/

HTML：

<section>
    <header>
         <h1>Perfered Method of Contact</h1>

    </header>
    <div> <span>Choice 1</span>

        <div class="square-radio square-radio--clicked">
             <div class="square-radio--content"></div>
        </div>
    </div>
    <div> <span>Choice 2</span>

        <div class="square-radio">
            <div class="square-radio--content"></div>
        </div>
    </div>
</section>

CSS：

.square-radio {
    border: 1px solid black;
    margin: 2px;
    width: 40px;
    height: 40px;
    position: relative;

}
.square-radio--clicked .square-radio--content{
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    BACkground-color: black;
    width: 20px;
    height: 20px;
}

JS：

$(document).ready(function () {
    $(document).on("click",".square-radio",function () {
        $(this).toggleClass("square-radio--clicked");
    });
});