我收到了單選按鈕的 output 值，即使其中一個被選中

Question

我只做了 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，不管它沒有被檢查

Answer 1

為了查看單選按鈕是否被選中，您應該使用.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>