文章/答案/技术大牛

发布

社区首页 >问答首页 >引导动态附加按钮组没有正确选择

问引导动态附加按钮组没有正确选择
EN

Stack Overflow用户

提问于 2022-02-09 19:04:15

回答 1查看 112关注 0票数 0

当我有一个引导5按钮组时，代码如下所示：

<div class="btn-group d-flex justify-content-between m-4">
  <input id="a" type="radio" class="btn-check" name="btnradio" autocomplete="off">
  <label class="btn btn-outline-primary" for="a">Option A</label>
  <input id="b" type="radio" class="btn-check" name="btnradio" autocomplete="off">
  <label class="btn btn-outline-primary" for="b">Option B</label>
  <input id="c" type="radio" class="btn-check" name="btnradio" autocomplete="off">
  <label class="btn btn-outline-primary" for="c">Option C</label>
</div>

如果组在分页期间出现在页面上，则工作正常。但是，如果我在pageload之后动态地追加元素，则按钮一旦单击就会保持“活动”状态，并且不能正常切换。

let options = ["D", "E", "F"];

let group = document.createElement('div');
group.className = 'btn-group d-flex justify-content-between m-4';
for (let type of options) {
  let button = document.createElement('input');
  button.id = type;
  button.name = type;
  button.type = 'radio';
  button.className = 'btn-check';
  button.autocomplete = 'off';
  group.append(button);
  let label = document.createElement('label');
  label.htmlFor = type;
  label.className = 'btn btn-outline-primary';
  label.innerHTML = 'Option ' + type;
  group.append(label);
}
document.body.append(group);

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h1 class="m-4">On Pageload</h1>
  <div class="btn-group d-flex justify-content-between m-4">
    <input id="a" type="radio" class="btn-check" name="btnradio" autocomplete="off">
    <label class="btn btn-outline-primary" for="a">Option A</label>
    <input id="b" type="radio" class="btn-check" name="btnradio" autocomplete="off">
    <label class="btn btn-outline-primary" for="b">Option B</label>
    <input id="c" type="radio" class="btn-check" name="btnradio" autocomplete="off">
    <label class="btn btn-outline-primary" for="c">Option C</label>
  </div>
  <h1 class="m-4">Dynamically Appended</h1>
</body>
</html>

知道为什么会这样吗？

javascript

html

css

twitter-bootstrap

bootstrap-5

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-09 19:17:17

您需要动态添加按钮来共享name属性。

如果您注意到在onload组中，它们都具有相同的name属性：name="btnradio"

而在动态添加的组中，它们都有不同的名称属性：button.name = type;

因为它们都有不同的名称，所以它们被视为不同的按钮组，因此选择另一个按钮不会取消其他按钮组的选择。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71055281

复制

相似问题

问引导动态附加按钮组没有正确选择
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导动态附加按钮组没有正确选择EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导动态附加按钮组没有正确选择
EN