当使用jQuery时,如果需要针对一组单选按钮并突出显示活动的单选按钮,可以按照以下步骤进行操作:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input type="radio" name="option" class="radio-btn">
<input type="radio" name="option" class="radio-btn">
<input type="radio" name="option" class="radio-btn">
change()
方法来监听单选按钮的状态变化:$('.radio-btn').change(function() {
// 在这里编写处理代码
});
addClass()
方法为活动的单选按钮添加一个类名,以突出显示它:$('.radio-btn').change(function() {
$('.radio-btn').removeClass('active'); // 移除所有单选按钮的活动类名
$(this).addClass('active'); // 为当前选中的单选按钮添加活动类名
});
.radio-btn.active {
background-color: #ff0000;
border: 2px solid #000000;
}
这样,当用户选择不同的单选按钮时,活动的单选按钮将突出显示出来。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云