Question

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

工作演示Here

JS小提琴不工作Here

的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

#LocFall {
    display:none;   
}

HTML

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

Answer 1

http://jsfiddle.net/6NN6s/14/

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

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

Answer 2

在第二个下拉列表中左侧的小提琴改变＆＃39; onLoad＆＃39;没有换行<head>＆＃39;。

Answer 3

将injure拆分为不同的函数;如果您选择No，则由于您的功能设置方式，您无法选择Yes - 第一个条件将始终评估为true。

Answer 4

问题源于不知道函数内部实际点击了哪个复选框。因为它只有两种不同的功能可以响应：一种是检查f1而一种是检查f2。问题是你实际上有更多可能的状态表示。

状态1：未检查任何内容，用户单击f1或f2
状态2：f1已选中，f2已点击
状态3：f2选中，f1点击

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

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

选中的复选框禁用另一个复选框的选择

4 个答案: