关于前端单选框样式问题，请求大佬指点一下

Question

问题：
如图，如何单击选中后，变蓝色。单击其他单选框的时候，之前选中的变灰，选中的变蓝。谢谢大佬们指点一下

 补充一下：

 <table id="table_report" class="table table-striped table-bordered table-hover">
                                    <tr>
                                        <td style="width:75px;text-align: right;padding-top: 13px;">文档类型:</td>
                                        <td>
                                            <c:if test="${not empty fileTypeList}">
                                                <c:forEach items="${fileTypeList}" var="fileTypeList" varStatus="vs">
                                                    <label for="${vs.index+1}" class="type" id="FILE_TYPE" onclick="changeCss()">
                                                        <div class="box"  name="changeCss">${fileTypeList.NAME}</div>
                                                    </label><input type="radio" name="FILE_TYPE" id="${vs.index+1}" value="${fileTypeList.ORDER_BY}" <c:if test="${pd.FILE_TYPE eq fileTypeList.ORDER_BY}">checked="checked"</c:if> />
                                                </c:forEach>
                                            </c:if>
                                        </td>
                                    </tr>
                                </table>

<style type="text/css">
        .box{
            width: 130px;
            height: 30px;
            border-radius: 5px;
            background: #CCCCCC;
            line-height: 30px;
            text-align: center;
            color: #FFFFFF;
        }
        .box:hover{
            background: #0086B3;
        }
        .changeCss1{
            width: 130px;
            height: 30px;
            border-radius: 5px;
            background: #0086B3;
            line-height: 30px;
            text-align: center;
            color: #FFFFFF;
        }
    </style>

function changeCss()
    {
        var arr = document.getElementsByName("FILE_TYPE");
        var div = document.getElementsByName("changeCss");
        for (var i =0; i< arr.length; i++)
        {
            if (arr[i].checked)
            {
              div[i].className = 'changeCss1';
            }else
            {
                div[i].className = 'box';
            }
        }
    }

请问为什么现在我单击选中一个后，样式不是改变当前选中的而是改变它的前一个呢？双击的话就是选中当前并且也只改变当前的

Answer 1

首先 灰色按钮和蓝色按钮有不同的class，通过class选择器设置他们是蓝色还是灰色。然后再给所有的按钮添加点击事件。
在点击事件中判断当前点击按钮的class是否代表蓝色，如果是，直接返回，否则，将代表蓝色的class的class移除 ，然后，给当前点击的
元素添加上代表蓝色的class