如何解决HTML Bootstrap 按钮切换
我试图在单击组中的按钮时取消切换按钮组中的其他按钮。例如,当一个人点击“E”时,它会打开 E 按钮并关闭其他按钮。
我正在为多个不同的按钮组执行此操作,但是每个按钮组都应该能够激活一个单独的按钮,是否也可以使其以这种方式工作?
<div class="btn-group btn-group-toggle">
<button class="btn btn-secondary acroTrained" data-toggle="buttons" autocomplete="off"> T </button>
<button class="btn btn-secondary acroExpert" data-toggle="buttons" autocomplete="off"> E </button>
<button class="btn btn-secondary acroMaster" data-toggle="buttons" autocomplete="off"> M </button>
<button class="btn btn-secondary acroLegendary" data-toggle="buttons" autocomplete="off"> L </button>
</div>
解决方法
Bootstrap 5 已经带有该功能,您可以在文档的这一部分阅读更多相关信息:https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups
private readonly IMyAccountService _myAccountService;
public Startup(IConfiguration configuration,IMyAccountService AccountService)
{
Configuration = configuration;
_myAccountService = AccountService
}
let radios = document.querySelectorAll('.btn-group.btn-group-unselectable input[type="radio"]');
radios.forEach(radio => {
radio.addEventListener('click',function(e) {
if (this.getAttribute('data-previous-value') == 'true') {
e.target.checked = false;
} else {
radios.forEach(radio => {radio.setAttribute('data-previous-value',false)});
}
this.setAttribute('data-previous-value',e.target.checked);
});
});
编辑
你可以用一些 JavaScript 代码来做到这一点,你需要在点击单选按钮时在元素上存储一个临时值,因为每次点击单选按钮时它都会被设置为选中状态,所以我们需要知道之前的状态选中属性,所以当我们再次点击时,我们可以知道按钮是否为 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-group-unselectable" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">T</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">E</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">M</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio4">L</label>
</div>
(活动),如果是,我们设置为 checked
。
此外,我将类 checked = false
添加到 .btn-group-unselectable
元素。
这是此代码的 JQuery 版本:
.btn-group
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。