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

我认为您应该更多地考虑如何最好地提供更好的用户体验。从我收集的内容来看，带有复选框作为子选项的单选按钮可以更好地适应这种情况。看看下面的例子。

＆＃13;

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

＆＃13;

.indent {
  margin-left: 15px;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

您必须在函数

中将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

显示错误消息后，选中复选框

3 个答案: