<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)捕捉到用户的当前选择并更改图标,此方法可以省略到很多不必要的代码