Question

我正在创建两个按钮组。每当我单击第二个按钮组中的按钮时，第一组中已选择的按钮将被取消选择。我只能选择两个组中的一个按钮。我想从每组中选择一个按钮。这是代码，我使用 :focus (css) 作为按钮。

编辑

我需要为 bootsrap 使用按钮类型（btn-primary）

.show {
  display: block;
}

.btn-group {
  margin-top: 20px;
  overflow: hidden;
}

.btn {
  font-weight: bold;
  color: white;
  border: none;
  outline: none;
  padding: 12px 16px;
  /*blue*/
  background-color: #2c75ff;
  cursor: pointer;
}

.btn:hover {
  font-weight: bold;
  color: white;
  /*green*/
  background-color: #85c995;
}

.btn:focus {
  /*green*/
  background-color: #85c995;
  color: white;
}

<div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group" id="group1" role="group">
      <button type="button" class="btn btn-primary" style="outline-color:red; " @onclick="() => UpdateTheChart(11)">@Language.T35</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(12)">@Language.T36</button>
      <button type="button" class="btn btn-primary" btn btn-primary " @onclick="()=> UpdateTheChart(13)">@Language.T37</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group" id="group2" role="group">
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(21)">@Language.T138</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(22)">@Language.T38</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(23)">@Language.T39</button>
      <button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(24)">@Language.T40</button>
    </div>
  </div>
</div>

Answer 1

不能同时将 :focus 应用于多个元素。

您需要手动向每个组中的所选项目添加/删除 CSS 类，或者更改您的代码以在这种情况下使用更合适的单选按钮组。

例如（伪代码，可能无法按原样工作）：

// Get all the buttons and add a click handler to them
let buttons = document.querySelectorAll(".btn-group .btn");
buttons.forEach(button => {
   button.addEventListener("click", () => {
      // do the UpdateChart stuff using some id property instead of inline onclick attribute
      UpdateTheChart(this.dataset.id);

      // find the button that has focus in the this button's group and remove the class
      this.parentElement.querySelector(".btn-focus").removeClass("btn-focus");

      // add the focus class to this button
      this.addClass("btn-focus");
   });
});

注意：为此，您必须更改 CSS 以使用 className 而不是 :focus 伪类。

Answer 2

简短的回答

不幸的是，不存在用于多选/单选的“按钮组”，这是 radio 和 checkbox 的工作。

长的

因为您想为每个组选择一个选项，所以您应该使用 radio，因为您可以创建组（通过 name 属性分组）并保持选中状态 (checked)每组一个选项。

应用解决方案：

您需要将 @onclick 事件移动到 label（因为它是您的新“按钮”），并隐藏 radio，以便保持相同的用户界面。

注意我将每个 label 放在各自的 radio 之后，以便我们可以使用 input[type="radio"]:checked + label 选择它们，意思是：对于 label 紧接在选中的 radio ，应用该样式。

例如：

.row {
  display: flex;
  gap: 1rem;
}

.column {
  display: flex;
  flex-direction: column;
}

label {
  /*blue*/
  background-color: #2c75ff;
  color: white;
  cursor: pointer;
  font-weight: bold;
  padding: 12px 16px;
  width: fit-content;
}

label:hover,
input[type="radio"]:checked+label {
  /*green*/
  background-color: #85c995;
}

input[type="radio"] {
  display: none;
}

<div class="row">
  <div class="column">
    <input type="radio" name="groupA" id="T35" />
    <label for="T35" @onclick="() => UpdateTheChart(11)">@Languaje.T35</label>
    <input type="radio" name="groupA" id="T36" />
    <label for="T36" @onclick="() => UpdateTheChart(12)">@Languaje.T36</label>
    <input type="radio" name="groupA" id="T37" />
    <label for="T37" @onclick="() => UpdateTheChart(13)">@Languaje.T37</label>
  </div>
  <div class="column">
    <input type="radio" name="groupB" id="T138" />
    <label for="T138" @onclick="() => UpdateTheChart(21)">@Languaje.T138</label>
    <input type="radio" name="groupB" id="T38" />
    <label for="T38" @onclick="() => UpdateTheChart(22)">@Languaje.T38</label>
    <input type="radio" name="groupB" id="T39" />
    <label for="T39" @onclick="() => UpdateTheChart(23)">@Languaje.T39</label>
    <input type="radio" name="groupB" id="T40" />
    <label for="T40" @onclick="() => UpdateTheChart(21)">@Languaje.T40</label>
  </div>
</div>

如何为不同的按钮组选择和更改颜色按钮？

2 个答案:

简短的回答

长的