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

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

 补充一下：

 <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';
            }
        }
    }

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

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

 <div v-for="(item, index) in list" :key="index">
        <!-- 四个卡片数字 -->
          <div @click="abc(index)">
            <el-card :class="[isactive === index ?'active':'']" class="center">
              <span class="sum">{{item.sum}}</span>
              <br>
              <span class="title">{{item.name}}</span>
            </el-card>
          </div>
      </div>

这是一个举例,上面你可以看到我用了循环在里面.用的是v-for循环,class用三目运算,当你默认的时候就默认灰色就行,当点击事件响应的话,如下

abc(e) {
        this.isactive = e
      }

这样子的话isactive这个变量就是一个变量[isactive === index ?'active':''],这个就当isactive等于index时候,class就是active,如果不是就默认class没有,后面的 class="center"是默认一直有的哦,这样子的逻辑清楚了吗~

addClass,removeClass利用这两个点击切换类名