[英]Dynamically change Font Awesome Icon on Radio Button Change Event
我想在選定的單選按鈕上添加一類Font Awesome圖標,我正在使用以下代碼
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-white btn-default btn-round">
<input name="P_AGND_ID" type="radio" value="1" checked="checked" />
<i class="ace-icon fa fa-check red2"></i>RADIO
</label>
<label class="btn btn-white btn-default btn-round">
<input name="P_AGND_ID" type="radio" value="2" />
<i class="ace-icon fa"></i>OPENING BIDS
</label>
<label class="btn btn-white btn-default btn-round">
<input name="P_AGND_ID" type="radio" value="3" />
<i class="ace-icon fa"></i>EXTENSION AWARDING
</label>
</div>
$('input[type=radio][name=P_AGND_ID]').on('change', function() {
$('input[name=P_AGND_ID]:not(:checked)').find('i').removeClass('fa-check');
$('input[name=P_AGND_ID]:checked').find('i').addClass('fa-check');
});
如果有人幫助我,我也創建了一個jsFiddle
問題是find()
僅查找所選元素的后代,您想要的是同級(因為<i>
是<input>
的同級)
因此,您可以使用:
$('input[name=P_AGND_ID]:not(:checked)').siblings('i').removeClass('fa-check');
$('input[name=P_AGND_ID]:checked').siblings('i').addClass('fa-check');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.