在单选按钮更改事件上动态更改字体Awesome图标

Dynamically change Font Awesome Icon on Radio Button Change Event

本文关键字：字体 Awesome 图标 动态 事件 单选按钮      更新时间：2023-09-26

我想在选定的单选按钮上添加一个类字体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如果有人帮助我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');
相关文章：