选中单选按钮时的样式元素答案

【问题标题】：Style elements when radio button is checked选中单选按钮时的样式元素
【发布时间】：2021-06-07 10:39:17
【问题描述】：

这里是初学者！我有 3 个单选按钮，每个按钮都由一个容器包裹，当使用 JS 选择单选按钮时，我正在尝试设置容器的样式。 I was able to change the border style of the container when a radio button is selected, but wasn't able to remove that border style when the other buttons were selected.我怎样才能做到这一点？

const radioBtns = document.querySelectorAll('.radio-btn')

radioBtns.forEach((radioBtn, index) => {

  const container = radioBtn.closest('.container');
  radioBtn.addEventListener('click', () => {
    container.classList.add('highlight');
    if (!radioBtn.checked) {
      container.classList.remove('highlight');
    }
  })
})

.container {
  border: 1px solid black;
}

.container.highlight {
  border: 1px solid green;
}

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn">
</div>

【问题讨论】：

首先，您将单击侦听器添加到每个单选按钮，因此它们都将执行相同的操作。无论单击哪个单选按钮，只要其中一个，边框将始终存在，因为您无法“取消选择”单选按钮。为此，您需要一个复选框。或者，您可以将其设置为要赋予边框的单选按钮具有不同的单击侦听器。这就是我为你准备的一切。
另外，您可能希望在单击其他两个单选按钮时“取消选择”。如果是这种情况，您可以在 JS 中以编程方式执行此操作，然后将样式应用于其他框。
只需在您的无线电输入上添加相同的name
除了其他注释之外，您还需要指定属性name 并确保它们都相同（例如：name="car"）。这将确保在任何时候都只能选择一个单选按钮。

标签： javascript html css

【解决方案1】：

你的 JS 没问题...可以使用复选框。

那么为什么不使用复选框呢？嗬，因为你更喜欢圆形的收音机，对吧？然后为您的复选框设置样式，使其看起来像收音机！

在下面的 sn-p 中，我没有触及 HTML （执行以更改复选框的单选） 或 JS。

const radioBtns = document.querySelectorAll('.radio-btn')

radioBtns.forEach((radioBtn, index) => {

  const container = radioBtn.closest('.container');
  radioBtn.addEventListener('click', () => {
    container.classList.add('highlight');
    if (!radioBtn.checked) {
      container.classList.remove('highlight');
    }
  })
})

.container {
  border: 1px solid black;
  position: relative;
}

.container.highlight {
  border: 1px solid green;
  background: rgba(0,255,0,0.3)
}

input[type='checkbox']:before{
  position: absolute;
  bottom: 2px;
  left: 2px;
  content: "";
  border: 1px solid blue;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: white;
}
input[type='checkbox']:checked:after{
  position: absolute;
  bottom: 6px;
  left: 6px;
  content: "";
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: blue;
}

<div class=container>
  <h1></h1>
  <p></p>
  <input type="checkbox" class="radio-btn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="checkbox" class="radio-btn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="checkbox" class="radio-btn">
</div>

【讨论】：

嘿，谢谢！我选择单选按钮的原因是我只想一次选择一个选项
好吧..然后寻找@Spectric的答案。

【解决方案2】：

您只需在现有行中添加几行代码即可避免这样做

const radioBtns = document.querySelectorAll('.radio-btn')

radioBtns.forEach((radioBtn, index) => {

  const container = radioBtn.closest('.container');
  const currentID = radioBtn.id;
  radioBtn.addEventListener('click', () => {
    container.classList.add('highlight');
    radioBtns.forEach((rb, ind) => {
      if(rb.id == currentID) return;
      rb.closest('.container').classList.remove('highlight');
      rb.checked = false;
    });
  })
})

.container {
  border: 1px solid black;
}

.container.highlight {
  border: 1px solid red;
}

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn" id="1">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn" id="2">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn" id="3">
</div>

【讨论】：

完美！这行得通。但是，我确实必须在第二个 forEach 循环内的 if 语句之后存储未选择的单选按钮的容器。否则代码将选择所选单选按钮的容器。你介意解释一下为什么我们需要将false分配给rb.checked吗？再次感谢！
我不确定你在说什么你必须改变， rb.checked 使其他单选按钮“取消选中”，以便只选择一个。这不是你想要的行为吗？

【解决方案3】：

为每个单选按钮使用相同的名称，以便用户一次只能选择一个。将上一个单选按钮存储在一个变量中，然后在每次单击单选按钮时删除 highlight 类。

const radioBtns = document.querySelectorAll('.radio-btn')
var prev;
radioBtns.forEach((radioBtn, index) => {

  const container = radioBtn.closest('.container');
  radioBtn.addEventListener('click', () => {
    container.classList.add('highlight');
    if(prev != undefined){
      prev.closest('.container').classList.remove('highlight');
    }
    prev = radioBtn;
  })
})

.container {
  border: 1px solid black;
}

.container.highlight {
  border: 1px solid green;
}

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn" name="radiobtn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn" name="radiobtn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" class="radio-btn" name="radiobtn">
</div>

【讨论】：

【解决方案4】：

通常，这些无线电 btn 只能激活一个。所以这些 btn 应该在一个组中，我们称之为 btn 组，就像 bootstrap 一样。我首先会包装一个 btn-group-container。当单击 radio-btn 时。它将搜索父 btn-group-container，然后删除 btn-group-container 下的所有突出显示样式，并将突出显示样式添加到当前 btn-容器。希望这可以帮助你。

【讨论】：

对不起！你说得对，我错过了这些按钮的名称属性，是的，我希望它们在同一个组中，所以只能选择一个选项

【解决方案5】：

这边

const radioBtns = document.querySelectorAll('.radio-btn')

radioBtns.forEach( (radioBtn,_,All) => 
  {
  radioBtn.onclick = _ =>
    {
    All.forEach(r=>r.closest('.container')
                     .classList.toggle('highlight', r.checked) )
    }
  })

.container {
  border     : 1px solid black;
}

.container.highlight {
  border-color : green;
  background   : yellow;
}

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" name="jojo" class="radio-btn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" name="jojo" class="radio-btn">
</div>

<div class=container>
  <h1></h1>
  <p></p>
  <input type="radio" name="jojo" class="radio-btn">
</div>

【讨论】：