在单选按钮组上使用数据属性来显示文本

Posted 2023-03-27

【中文标题】在单选按钮组上使用数据属性来显示文本

【英文标题】：Using data attribute on radio button group to show text

【发布时间】：2021-08-28 02:18:28

【问题描述】：

我所追求的结果是，当用户将键盘焦点发送到单选按钮组并使用箭头键导航到每个单选按钮，或者使用指点设备（鼠标）单击单选按钮时，数据属性该单选按钮的值设置为元素 (h2)。

我已经走了这么远，现在卡住了。我在示例中使用了 ID，但是，我更喜欢使用类或 data-set="X"。

下面的代码设置了第一个 data-col 值而不是第二个。

感谢您的帮助，因为我从 *** 学到了很多东西。我在 vanilla JS 而不是 jQuery 中需要这个，抱歉。

<p>
<label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" data-set="Green" id="demo3">
</label>
 <label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" data-set="Blue" id="demo3">
</label>
</p>
<h2 id="chjkl"></h2>

document.getElementById('demo3').onclick = function changeClk() 
  const setCol = document.querySelector('#demo3');
  document.getElementById('chjkl').innerhtml = setCol.dataset.col


document.getElementById('demo3').onfocus = function changeFoc() 
const setCol = document.querySelector('#demo3');
  document.getElementById('chjkl').innerHTML = setCol.dataset.col

    

【参考方案1】：

使用event.target 获取数据集。

在下面的示例中，我更改了 h2 元素背景的颜色。请注意，我将event 传递给函数 并在eventListener 中调用函数。

除了有两个eventListeners之外，我还向单选按钮添加了一个类，然后使用querySelectorAll() 查询。然后通过循环运行 nodeList 并在 eventListener 被触发时检查 event.target。

您的代码的一个问题是您有多个具有相同 ID 的元素。您不应拥有多个具有任何唯一 ID 的元素。 ID 只能对一个元素唯一。

let radio = document.querySelectorAll('.radio')
let target = document.getElementById('chjkl')

function changeColor(e) 
  target.style.backgroundColor = e.target.dataset.col
  target.textContent = e.target.dataset.col


radio.forEach(btn => 
  btn.addEventListener('focus', changeColor)
)

#chjkl 
  display: flex;
  justify-content: center;
  letter-spacing: 1.3rem;

<p>
  <label for="">The colour is Green
<input type="radio" name="bob" data-col="Green" class="radio">
</label>
  <label for="">The colour is Red
<input type="radio" name="bob" data-col="Red" class="radio">
</label>
  <label for="">The colour is Blue
<input type="radio" name="bob" data-col="Blue" class="radio">
</label>
  <label for="">The colour is Orange
<input type="radio" name="bob" data-col="Orange" class="radio">
</label>
</p>
<h2 id="chjkl"></h2>

【讨论】：

太好了，谢谢，这么简单。关于唯一 ID，这是我所知道的。我只在这种情况下使用，因为我无法使用任何其他方法。