时间戳

首页 > 解决方案 > 即使选中了一个，我也会收到单选按钮的输出值

javascript - 即使选中了一个，我也会收到单选按钮的输出值

问题描述

我只做了这段java脚本代码

所以也许我需要做一个添加事件监听器，但我不知道我需要做什么

pick_up:document.getElementById("shippingOption1").value,
            delivery:document.getElementById("shippingOption2").value

the output is 
pick up:onor

delivery:on

我希望其中一个在选中时打开，如果未选中则关闭我该怎么做？

html

<div class="custom-control custom-radio">
<input id="shippingOption2" name="shipping-option" class="custom-control-input" type="radio">

<div class="custom-control custom-radio"><input id="shippingOption1" name="shipping-option" class="custom-control-input" checked="checked" type="radio" ">
<label class="custom-control-label" for="shippingOption1">

ps 我已经尝试将 1 和 2 的值添加到 html 代码，但它只给出 1 和 2，不管它没有被检查

标签： javascripthtml

解决方案

为了查看单选按钮是否被选中，您应该使用该.checked属性。

pick_up: document.getElementById("shippingOption1").checked,
delivery: document.getElementById("shippingOption2").checked

对于值，您可以添加属性value="delivery"以便在不知道它的情况下知道检查了什么id。

这是一段代码，它是如何工作的：

function handleChange() {
  const options = {
      pick_up: document.getElementById("shippingOption1").checked,
      delivery: document.getElementById("shippingOption2").checked
  }
  
  const result = document.querySelector('.result');
  
  if (options.pick_up) {
    result.textContent = 'You chose pickup';
  } else if(options.delivery) {
    result.textContent = 'You chose delivery';
  }
 
  console.log(options);
};
<div class="custom-control custom-radio">
    <input id="shippingOption2" name="shipping-option" class="custom-control-input" type="radio" onchange="handleChange()" value="delivery">
    <label class="custom-control-label" for="shippingOption2">delivery</label>
</div>

<div class="custom-control custom-radio">
    <input id="shippingOption1" name="shipping-option" class="custom-control-input" type="radio" onchange="handleChange()" value="pick_up">
    <label class="custom-control-label" for="shippingOption1">pick_up</label>
</div>


<div class="result">Select an option</div>
<div class="result2">The value of the selected option is: </div>

推荐阅读