HTML 多个图片(按钮)进行单选

HTML

<div class="function GradeTab">

            <ul>

                <li>
                    <dl>
                        <dd class="MyFun">当前等级<label class="Initialization"></label></dd>
                        <dd class="entryBorderBom"></dd>
                    </dl>
                </li>

                <li res="1">
                    <dl>
                        <dd class="MyFun">申请升级为<label>中级业务员</label></dd>
                        <dd class="rightFun"><img src="img/circleGay.png" class="circleGay"></dd>
                        <dd class="entryBorderBom"></dd>
                    </dl>
                </li>

                <li res="2">
                    <dl>
                        <dd class="MyFun">申请升级为<label>高级业务员</label></dd>
                        <dd class="rightFun" ><img src="img/circleGay.png" class="circleGay"></dd>
                        <dd class="entryBorderBom"></dd>
                    </dl>
                </li>

                <li res="3">
                    <dl>
                        <dd class="MyFun">申请升级为<label>合伙人</label></dd>
                        <dd class="rightFun" ><img src="img/circleGay.png" class="circleGay"></dd>
                    </dl>
                </li>

            </ul>

        </div>

JQ

 $(".GradeTab  ul li .rightFun").on('click', function () {
                $(this).find("img").attr('src', $(this).find("img").attr('src') == 'img/circleGay.png' ? 'img/correct_People.png' : 'img/circleGay.png');
                console.log($(this).parent().parent().siblings("li").find("img").attr("src", "img/circleGay.png"));

               console.log($(this).parent().parent().attr("res")); 传值当前用户申请等级与后台交互
            })