即使在顯示錯誤消息後仍選中複選框

Question

a，b，c，d是4個複選框。如果選擇「a」，則不應選中剩餘的複選框b，c，d。

如果B，C中的一個或多個複選框時，選擇d，那麼「A」不應該選擇

if(document.getElementById('a').checked) { 
    if(document.getElementById('b').checked || document.getElementById('c').checked || document.getElementById('d').checked){ 
    alert("choose between 'A' and one/more option from b,c,d"); 
    return; 
    } 
} 

我儘快我刪除警報，我可以得到一個警報消息，但查看'a'和b，c，d中的一個選項。 如何防止它，以便只有其中一個被選中即使我刪除警報消息？我想最新的選項取消選中

Answer 1

document.getElementById('b').checked = false; 
document.getElementById('c').checked = false; 
document.getElementById('d').checked = false; 

Answer 2

您必須將checked物業在功能設置爲false

if(document.getElementById('a').checked) { 
     if(document.getElementById('b').checked || document.getElementById('c').checked || document.getElementById('d').checked){ 
      alert("choose between 'A' and one/more option from b,c,d"); 
      document.getElementById('b').checked = document.getElementById('c').checked = document.getElementById('d').checked = false 
      return; 
     } 

}

Example

Answer 3

我想你應該THI更多關於如何最好地提供更好的用戶體驗。從我收集的信息來看，帶複選框作爲子選項的單選按鈕可以更好地適應這種情況。看看下面的例子。

function handleOption(myRadio) { 
 
    document.querySelectorAll("#bcdCheckboxes input[type='checkbox']").forEach(e => e.disabled = myRadio.value === 'a'); 
 
}

.indent { 
 
    margin-left: 15px; 
 
}

<input type="radio" name="option" onclick="handleOption(this)" value="a">Option A 
 
<br> 
 
<input type="radio" name="option" onclick="handleOption(this)" value="bcd">Other Options 
 
<br> 
 
<div class="indent" id="bcdCheckboxes"> 
 
    <label> 
 
    <input type="checkbox" value="b" disabled>Option B</label> 
 
    <br> 
 
    <label> 
 
    <input type="checkbox" value="c" disabled>Option C</label> 
 
    <br> 
 
    <label> 
 
    <input type="checkbox" value="d" disabled>Option D</label> 
 
</div>