我想在用户每次检查收音机框时显示价格

Question

我有一个电台选择列表。当用户选择其中一个时，我就是它右边的显示总价。 的价格

2-9 = $ 100.00

10-20 = $ 150.00

21-50 = $ 200.00

51-75 = $ 250.00

76-100 = $ 300.00

100 + = $ 500.00

我希望价格显示在右侧

Answer 1

这是显示value元素的input[type=radio的方式。

const
  radioBtns = document.querySelectorAll('input[type=radio]')

// adds an event listener to each radio button
// in order to detect user input
for (let i = 0; i < radioBtns.length; i++){
  radioBtns[i].addEventListener('input', function(){
    // displays the corresponding price to the user
    document.querySelector('#estimate').innerHTML = `$${Number(this.value).toFixed(2)}`
  })
}

form {
  display: flex;
  flex-direction: column;
}

#estimate {
  position: relative;
  top: 20px;
  padding: 10px;
  display: inline;
  border: solid black 3px;
}

<form>
  <div>
    <input type='radio' name='quantity' value='100' />
    <text>2-9</text>
  </div>
  <div>
    <input type='radio' name='quantity' value='150'  />
    <text>10-20</text>
  </div>
  <div>
    <input type='radio' name='quantity' value='200' />
    <text>21-50</text>
  </div>
  <div>
    <input type='radio' name='quantity' value='250' />
    <text>51-75</text>
  </div>
</form>

<div id='estimate'></div>

Answer 2

这是您要寻找的吗？

如果是这样，它是这样工作的：

在change事件上注册一个代理监听器（这仅需要添加一个监听器，而不是向每个单选按钮添加一个监听器）单选按钮。每当侦听器触发时，抓住event.target并读取其value。在要显示总价的元素上将其设置为textContent。

numberOfEmployees.addEventListener('change', (e) => {
  price.textContent = e.target.value;
})

#numberOfEmployees { display: flex; flex-direction: column; }
#price:not(:empty)::before { content: "Total price: $"; }
#price:empty::before { content: "Please select your employee number."; }

<div id="numberOfEmployees">
    <label><input type="radio" name="amount" value="100.00">2-9</label>
    <label><input type="radio" name="amount" value="150.00">10-20</label>
    <label><input type="radio" name="amount" value="200.00">21-50</label>
    <label><input type="radio" name="amount" value="250.00">51-75</label>
    <label><input type="radio" name="amount" value="300.00">76-100</label>
    <label><input type="radio" name="amount" value="500.00">100+</label>
</div>
<hr />
<div id="price"></div>