Question

在HTML表单中，我有以下部分，我想像单选按钮一样显示，但看起来像常规按钮。

<span>Minimum Skill Level:</span><br />
<input type='button' id='skMin1' class='btn-sm' name='skMin' value='1' checked>
<input type='button' id='skMin2' class='btn-sm' name='skMin' value='2'>
<input type='button' id='skMin3' class='btn-sm' name='skMin' value='3'>
<input type='button' id='skMin4' class='btn-sm' name='skMin' value='4'>
<input type='button' id='skMin5' class='btn-sm' name='skMin' value='5'>

通过使组中所有按钮的名称相同，它们就像单选按钮一样，单击第二个按钮将取消选择第一个按钮。

我有一段JavaScript，它为每个按钮添加了一个侦听器并保存了值。它将更改按钮的背景颜色以显示已被选中。

let radioButton1 = document.querySelectorAll("[name=skMin]").forEach(function(e) {
        e.addEventListener('click', () => {
        e.style.background = 'cyan';
        drillSession.skillMin = e.value;
    })
})

看起来像我想要的一样，我正在获取数据，但是有一个大问题。单击组中的第二个按钮确实会更改值，但是我不知道如何取消突出显示先前选择的选项，因此不会因看到多个突出显示的按钮而使用户感到困惑。有什么建议吗？

Answer 1

尝试

let radioButton1 = document.querySelectorAll("[name=skMin]").forEach(function(e,i,a) {
    e.addEventListener('click', (event) => {
        a.forEach(x=>x.style.background = 'white')
        e.style.background = 'cyan'
        //drillSession.skillMin = e.value       
    })
})

<span>Minimum Skill Level:</span><br />
<input type='button' id='skMin1' class='btn-sm' name='skMin' value='1' checked>
<input type='button' id='skMin2' class='btn-sm' name='skMin' value='2'>
<input type='button' id='skMin3' class='btn-sm' name='skMin' value='3'>
<input type='button' id='skMin4' class='btn-sm' name='skMin' value='4'>
<input type='button' id='skMin5' class='btn-sm' name='skMin' value='5'>

Answer 2

请注意，事件处理程序中的e通常用来引用传递的event参数-为避免混淆，您可以考虑使用其他名称，例如，button或skMinButton或类似的东西。

一种选择是首先遍历所有按钮，并删除其background属性：

const buttons = document.querySelectorAll("[name=skMin]"); buttons.forEach((skMinButton) => { skMinButton.addEventListener('click', () => { buttons.forEach((button) => { button.style.removeProperty('background'); }); skMinButton.style.background = 'cyan' // drillSession.skillMin = e.value }); });

<span>Minimum Skill Level:</span><br /> <input type='button' id='skMin1' class='btn-sm' name='skMin' value='1' checked> <input type='button' id='skMin2' class='btn-sm' name='skMin' value='2'> <input type='button' id='skMin3' class='btn-sm' name='skMin' value='3'> <input type='button' id='skMin4' class='btn-sm' name='skMin' value='4'> <input type='button' id='skMin5' class='btn-sm' name='skMin' value='5'>

更有效的可能性是将先前选择的按钮保存在变量中，而仅删除其 background：

const buttons = document.querySelectorAll("[name=skMin]"); let selectedButton; buttons.forEach((skMinButton) => { skMinButton.addEventListener('click', () => { if (selectedButton) { selectedButton.style.removeProperty('background'); } selectedButton = skMinButton; skMinButton.style.background = 'cyan' // drillSession.skillMin = e.value }) })

<span>Minimum Skill Level:</span><br /> <input type='button' id='skMin1' class='btn-sm' name='skMin' value='1' checked> <input type='button' id='skMin2' class='btn-sm' name='skMin' value='2'> <input type='button' id='skMin3' class='btn-sm' name='skMin' value='3'> <input type='button' id='skMin4' class='btn-sm' name='skMin' value='4'> <input type='button' id='skMin5' class='btn-sm' name='skMin' value='5'>

您还可以考虑使用事件委托，以便仅附加一个侦听器，而不是为每个按钮单独分配一个侦听器：

let selectedButton; document.querySelector('.min-skill').addEventListener('click', ({ target }) => { if (!target.matches('input')) { return; } if (selectedButton) { selectedButton.style.removeProperty('background'); } selectedButton = target; target.style.background = 'cyan' // drillSession.skillMin = e.value });

<div class="min-skill"> <span>Minimum Skill Level:</span><br /> <input type='button' id='skMin1' class='btn-sm' name='skMin' value='1' checked> <input type='button' id='skMin2' class='btn-sm' name='skMin' value='2'> <input type='button' id='skMin3' class='btn-sm' name='skMin' value='3'> <input type='button' id='skMin4' class='btn-sm' name='skMin' value='4'> <input type='button' id='skMin5' class='btn-sm' name='skMin' value='5'> </div>

Answer 3

OP代码的编写方式，它会创建闭包和循环引用，这可能会占用内存。您可能希望通过使侦听器使用离散函数而不是匿名函数表达式来清理它。另外，将侦听器作为参考附加使 this 更加有用。

一种突出显示/取消突出显示的简单方法是添加和删除一个类，然后您可以使用选择器有效地找到突出显示的类，例如

var utils = {
  toggleSelected: function(evt) {
    let hClass = 'btn_selected';
    document.querySelectorAll('.' + hClass).forEach(el => el.classList.remove(hClass));  
    this.classList.add(hClass);    
  }
};

window.addEventListener('DOMContentLoaded',function(){
  document.querySelectorAll('input.btn-sm').forEach(btn =>
    btn.addEventListener('click', utils.toggleSelected, false));
}, false);

.btn_selected {
  background-color: #ffbb99;
}

<span>Minimum Skill Level:</span><br/>
<input type='button' class='btn-sm' name='skMin' value='1'>
<input type='button' class='btn-sm' name='skMin' value='2'>
<input type='button' class='btn-sm' name='skMin' value='3'>
<input type='button' class='btn-sm' name='skMin' value='4'>
<input type='button' class='btn-sm' name='skMin' value='5'>

默认情况下，单选按钮会执行此操作，因此也许您应该查看样式化的单选按钮，而不是脚本化按钮。

var utils = {
  toggleSelected: function(evt) {
    let tgt = this;
    let div = this.closest('div')
    let hClass = 'btn_selected';
    div.querySelectorAll('.' + hClass).forEach(el => el.classList.remove(hClass));
    this.classList.add(hClass);
  },
  removeAllSelected: function(evt) {
    let hClass = 'btn_selected';
    document.querySelectorAll('.' + hClass).forEach(el => el.classList.remove(hClass));

  }
};

window.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('input.btn-sm').forEach(btn =>
    btn.addEventListener('click', utils.toggleSelected, false));
    document.getElementById('theReset').addEventListener('click', utils.removeAllSelected, false);
}, false);

.btn_selected {
  background-color: #ffbb99;
}

<fieldset><legend>Select some values&hellip;</legend>
<div id="set0">
  <span>Minimum Skill Level:</span><br>
  <input type='button' class='btn-sm' name='skMin' value='1'>
  <input type='button' class='btn-sm' name='skMin' value='2'>
  <input type='button' class='btn-sm' name='skMin' value='3'>
</div>
<div id="set1">
  <span>Minimum Education Level:</span><br>
  <input type='button' class='btn-sm' name='skMin' value='1'>
  <input type='button' class='btn-sm' name='skMin' value='2'>
  <input type='button' class='btn-sm' name='skMin' value='3'>
</div>
<div id="set2">
  <span>Minimum Confidence Level:</span><br>
  <input type='button' class='btn-sm' name='skMin' value='1'>
  <input type='button' class='btn-sm' name='skMin' value='2'>
  <input type='button' class='btn-sm' name='skMin' value='3'>
</div>
<button id="theReset">Reset All</button>
</fieldset>

如何在JavaScript中取消选择输入类型=“按钮”

3 个答案: