[英]Dynamically change Font Awesome Icon on Radio Button Change Event
I want to add a class of Font Awesome icon on selected Radio button, I am using following code 我想在选定的单选按钮上添加一类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');
});
I have also created a jsFiddle if some one help me JSFiddle 如果有人帮助我,我也创建了一个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>
) 问题是
find()
仅查找所选元素的后代,您想要的是同级(因为<i>
是<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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.