在单选按钮选择上显示元素 [英] Show element on radio button selection

问题描述

我想在vanilla JavaScript中的单选按钮选项中显示输入文本字段。

I would like to show input text field on radio button selection in vanilla JavaScript.

我缺少什么？

const form = document.querySelector("form");
const size = form.elements["size"];
const total = form.elements["total"];

total.style.display = "none";

for (var i = 0; i < size.length; i++) {
  if (size[i].checked) {
    total.style.setProperty("display", "inherit");
  } else {
    total.style.setProperty("display", "none");
  }
}

<form>
<fieldset>
  <legend>Choose Size</legend>
  <label><input type="radio" name="size" id="six">6-inch</label>
  <label><input type="radio" name="size" id="eight">8-inch</label>
  <label><input type="radio" name="size" id="twelve">12-inch</label>
</fieldset>

<input type="text" name="total" readonly>
</form>

我知道之前在Stack Overflow上提出了类似的问题，但所有问题都在jQuery中。

推荐答案

const form = document.querySelector("form");
const size = form.elements.size;
const total = form.elements.total;

total.style.display = "none";

for (var i = 0; i < size.length; i++) {
  size[i].onclick = function() {
    if (this.checked) {
      total.style.setProperty("display", "inherit");
      total.value = this.value;
    } else {
      total.style.setProperty("display", "none");
    }
  }
}

<form>
  <fieldset>
    <legend>Choose Size</legend>
    <label><input type="radio" name="size" value="6" id="six" required>6-inch</label>
    <label><input type="radio" name="size" value="8" id="eight">8-inch</label>
    <label><input type="radio" name="size" value="12" id="twelve">12-inch</label>
  </fieldset>

  <input type="text" name="total" readonly>
</form>

点击小提琴


希望这会有所帮助。

Check this on Fiddle
Hope this will be helpful.

这篇关于在单选按钮选择上显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！