Javascript 选中复选框禁用选择其他复选框

我有理由使用复选框而不是单选按钮，所以请不要建议我使用单选按钮，但需要复制功能。但是，当我选中“是”复选框时，它会出于某种原因禁用“否”复选框。选择“否”时，我想隐藏div并取消选择“是”，反之，选择“是”时，我想显示div并取消选中“否”。选中“是”时，我可以选择“否”的唯一方法是取消选中它

工作演示

JS小提琴不起作用

Javascript

function injure() {
     if (document.getElementById("f2").checked == true) {
         document.getElementById("LocFall").style.display="block";
         document.getElementById("f1").checked = false;
     } else {
         if (document.getElementById("f1").checked == true) {
             document.getElementById("LocFall").style.display="none";
             document.getElementById("f2").checked = false;
         }
     }
}

CSS

HTML

否

是

展示一些东西

在第二个下拉列表左侧的小提琴更改为“onLoad”到“no wrap-In

”。

在第二个下拉列表左侧的小提琴更改为“onLoad”到“no wrap-In

”。

在第二个下拉列表左侧的小提琴更改为“onLoad”到“no wrap-In

”。

在小提琴更改为“no wrap-In”第二个下拉列表“onLoad”为“no wrap-in

”。

将

伤害

拆分为不同的功能；如果您选择了

否

，则您不能选择

是

，因为您的功能设置方式-第一个条件将始终评估为

真

将

伤害

拆分为不同的功能；如果您选择了

否

，则您不能选择

是

，因为您的功能设置方式-第一个条件将始终评估为

真

将

伤害

拆分为不同的功能；如果您选择了

否

，则您不能选择

是

，因为您的功能设置方式-第一个条件将始终评估为

真

将

伤害

拆分为不同的功能；如果选择

否

，则由于函数的设置方式，您无法选择

是

——第一个条件将始终评估为

真

，问题源于不知道函数中实际单击了哪个复选框。实际上，函数只有两种不同的响应方式：一种是检查f1，另一种是检查f2。问题是，实际上有更多可能的状态，你正试图表示

状态1：未选中任何内容，用户单击f1或f2

状态2：f1已选中，f2已单击

状态3:f2已选中，f1已单击

您的代码可以很好地处理第一个状态，但无法正确处理第二个状态。如果您将代码拆分为两个单独的函数来处理每个框，那么您将拥有编写正确决策逻辑所需的所有信息

---

还有单击同一个框的状态，但它们很简单，您的代码已经处理了它们。

问题源于不知道函数中实际单击了哪个复选框。实际上，函数只有两种不同的响应方式：一种是检查f1，另一种是检查f2。问题是，实际上有更多可能的状态，你正试图表示

状态1：未选中任何内容，用户单击f1或f2

状态2：f1已选中，f2已单击

状态3:f2已选中，f1已单击

您的代码可以很好地处理第一个状态，但无法正确处理第二个状态。如果您将代码拆分为两个单独的函数来处理每个框，那么您将拥有编写正确决策逻辑所需的所有信息

---

还有单击同一个框的状态，但它们很简单，您的代码已经处理了它们。

问题源于不知道函数中实际单击了哪个复选框。实际上，函数只有两种不同的响应方式：一种是检查f1，另一种是检查f2。问题是，实际上有更多可能的状态，你正试图表示

状态1：未选中任何内容，用户单击f1或f2

状态2：f1已选中，f2已单击

状态3:f2已选中，f1已单击

您的代码可以很好地处理第一个状态，但无法正确处理第二个状态。如果您将代码拆分为两个单独的函数来处理每个框，那么您将拥有编写正确决策逻辑所需的所有信息

---

还有单击同一个框的状态，但它们很简单，您的代码已经处理了它们。

问题源于不知道函数中实际单击了哪个复选框。实际上，函数只有两种不同的响应方式：一种是检查f1，另一种是检查f2。问题是，实际上有更多可能的状态，你正试图表示

状态1：未选中任何内容，用户单击f1或f2

状态2：f1已选中，f2已单击

状态3:f2已选中，f1已单击

您的代码可以很好地处理第一个状态，但无法正确处理第二个状态。如果您将代码拆分为两个单独的函数来处理每个框，那么您将拥有编写正确决策逻辑所需的所有信息

还有单击同一个框的状态，但它们很简单，您的代码已经在处理它们了。

不


对


展示一些东西
功能损伤（cmb）{
如果（中巴检查）{
如果（cmb.id==“f2”）
{document.getElementById（“LocFall”）.style.display=“block”；
document.getElementById（“f1”）.checked=false；
}
其他的
{
document.getElementById（“LocFall”）.style.display=“无”；
document.getElementById（“f2”）.checked=false；
}
}    
}

试试这个，可能是你需要的。

不


对


展示一些东西
功能损伤（cmb）{
如果（中巴检查）{
如果（cmb.id==“f2”）
{document.getElementById（“LocFall”）.style.display=“block”；
document.getElementById（“f1”）.checked=false；
}
#LocFall {
    display:none;   
}

    <input type="checkbox" id="f1" name=""  onclick="injure();">
    <label for="f1"> No </label><BR>
    <input type="checkbox" id="f2" name=""  onclick="injure();">
    <label for="f2"> Yes</label><BR>

    <div id="LocFall">
        Show some stuff
    </div>

<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>


function injure(cmb) {
    if (cmb.checked) {
        if(cmb.id==="f2")
        {   document.getElementById("LocFall").style.display = "block";
             document.getElementById("f1").checked = false;
        }
        else
        {
            document.getElementById("LocFall").style.display = "none";
            document.getElementById("f2").checked = false;
        }
    }    
}