<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)捕捉到用戶的當前選擇并更改圖標，此方法可以省略到很多不必要的代碼

總結

以上是生活随笔為你收集整理的利用jQuery和bootstrap更改radio样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。