<div class="container body-content"><div class="row"><div class="text-center col-xs-12"><h3>标题</h3><div class="well well-sm"><div class="btn-group" data-toggle="buttons" id="Select"><!--     更改radio传统样式，label与btn绑定可以提高用户的体验效果，增大选区范围，但是btn样式会将“圆点”选择区覆盖掉，可以利用图标glyphicon代替原有的“圆点”选择区--><label class="btn btn-default"><span class="glyphicon glyphicon-unchecked"></span><input type="radio" /> 选择一</label><label class="btn btn-default"><span class="glyphicon glyphicon-unchecked"></span><input type="radio" /> 选择二</label><label class="btn btn-default"><span class="glyphicon glyphicon-unchecked"></span><input type="radio" /> 选择三</label></div></div></div></div></div>

  "use strict";$(document).ready(function () {$("#Select .btn").on('click', function () {ToggleRadioButtons("#Select", $(this));});});function ToggleRadioButtons(groupName, current){//在当前的btn-group里先清除所有“选取”图标，全部换成“取消”样式（“初始化”）$(groupName + " .glyphicon-check").removeClass("glyphicon-check").addClass("glyphicon-unchecked");//alert("暂停啦");//更改当前用户选择的那个btn图标current.find(":first-child").removeClass("glyphicon-unchecked").addClass("glyphicon-check");}

利用函数将所有的选择历史先清除，之后再利用$(this)捕捉到用户的当前选择并更改图标，此方法可以省略到很多不必要的代码