Vanilla JavaScript - 获取单选按钮的值并在 DOM 中显示该值

Question

我在页面左侧设置了一个表单，并在页面右侧显示用户输入的内容（作为 JS 练习）。

我有一个同名单选按钮列表。

<div class="subscribe">
  <p>Would you like to subscribe?</p>
  <label for="yes">Yes</label>
  <input type="radio" name="subscribe" id="yes">
  <label for="no">No</label>
  <input type="radio" name="subscribe" id="no">
</div>

我正在尝试检索这些单选按钮的值并通过向 DOM 添加新的 div 来显示用户选择的内容，但我似乎无法获得正确的代码.我已经能够使它适用于其他类型的输入字段（文本、数字等），但我真的无法使用这些单选按钮。

// Get Subscription Status - NEEDS MORE WORK!!!!!
let sub = getRadioVals();

function getRadioVals() {
  let val;
  let radios = document.getElementsByName("subscribe");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      val = radios[i].value;
    }
  }
  return val;
}

sub.addEventListener("blur", () => {
  // create div
  let subDiv = document.createElement("div");
  subDiv.innerText = sub.value;

  // add div to DOM
  document.querySelector(".data-container").appendChild(subDiv);

});

<div class="subscribe">
  <p>Would you like to subscribe?</p>
  <label for="yes">Yes</label>
  <input type="radio" name="subscribe" id="yes">
  <label for="no">No</label>
  <input type="radio" name="subscribe" id="no">
</div>

Answer 1

对于单选按钮，它们具有互斥的值。即，如果一个单选按钮是 selected，它的值是 'on'，如果你 de-select 它，那么它的值是 'off'（'on' 和 'off' 是每个单选按钮的默认值。

根据你的问题，我了解到你希望这些单选按钮相互依赖。即用户可以 select 是或否，而不是既是又不是。因此，我为单选按钮添加了值。如果您 select 'Yes' 的单选按钮，您可以在 JS 中读取的值将是 'Yes' 而对于单选按钮 'No'，您现在可以读取的值将是是 'No'.

在 Javascript 代码中，我使用 querySelectorAll 并检索收音机（节点列表），然后使用 Array.prototype.forEach( ) 函数添加 eventListeners 以捕获单击事件的值。如果将这些值存储在单个变量中，则可以在单击其中任何一个时将值设置为 'Yes' 或 'No'。您可以尝试运行代码段，如果您有任何疑问，请在下面评论。

let radioVal;

const radios = document.querySelectorAll('input[name="subscribe"]');
radios.forEach(radio => {
  radio.addEventListener('click', function () {
    radioVal = radio.value;
    console.log(radioVal);
  });
});

          <div class="subscribe">
            <p>Would you like to subscribe?</p>
            <label for="yes">Yes</label>
            <input type="radio" name="subscribe" id="yes" value="Yes" />
            <label for="no">No</label>
            <input type="radio" name="subscribe" id="no" value="No" />
          </div>

Answer 2

//adding an event listener to the radio buttons
$("[name='subscribe']").click(function(){
  //get the label's inner text value
  let option = $(this).prev().text()
  //appending the option chosen to an element with a data-container tag  
  $(".data-container").append(`<div>${option}</div>`)
  //changing the display text value to the option chosen instead
    $(".data-container").text(`${option}`)
})

这里使用了 JQuery，希望您不要介意。您需要 getRadioVals() 的事件侦听器，因为此函数只会执行一次，并且在 DOMContentLoaded 上执行，因此它不会像事件侦听器那样对更改做出反应。

这就是您真正需要做的。查看您的代码，我不知道您为什么需要模糊事件。只需为单选按钮添加一个点击事件即可。

Vanilla JavaScript - 获取单选按钮的值并在 DOM 中显示该值

Vanilla JavaScript - Get the value of radio buttons and display the value in the DOM

javascript

dom

function

addeventlistener

radio-button