I want to add a class of Font Awesome icon on selected Radio button, I am using following code
<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');
});
I have also created a jsFiddle if some one help me JSFiddle
The problem is that find()
only finds descendants of the selected elements, what you want is a sibling (because <i>
is a sibling of <input>
)
So you can use:
$('input[name=P_AGND_ID]:not(:checked)').siblings('i').removeClass('fa-check');
$('input[name=P_AGND_ID]:checked').siblings('i').addClass('fa-check');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.