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

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

工作演示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>

来源

2014-03-27 DivineChef

我感兴趣的是您选择无线电按钮复选框的原因！ – tobiv

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

尝试了这一点，可能是你所需要的。

来源

2014-03-27 17:58:10

优秀我想通了，我不得不将HTML功能更改为onclick =“injure（this）;”谢谢。 – DivineChef

现在如果DIV可见并且我想取消选中是或id =“f2”，我还想隐藏DIV。 – DivineChef

试试这个：http://jsfiddle.net/6NN6s/15/ –

在第二个下拉列表'onLoad'左边的小提琴更改为'不换行 - 在<head>'。

来源

2014-03-27 17:51:05

什么？没有下拉列表。 – DivineChef

这是问题所在。 [这里]（http://jsfiddle.net/6NN6s/13/）你有一个更新的小提琴选择该选项和[这里]（http://stackoverflow.com/questions/15543456/testing-a-function-in -jsfiddle）更多信息 – Martin

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

来源

2014-03-27 17:54:44 Kvothe

问题源于不知道函数内部实际点击了哪个复选框。因为它只有两种不同的函数可以响应的方法：一个是f1被选中，一个是f2被选中。问题是你试图表达的实际上有更多可能的状态。

状态1：没有检查，用户点击F1或F2
状态2：F1检查，F2点击
状态3：F2检查，F1点击

你的代码处理第一状态良好，但不能妥善处理第二个问题。如果您将代码分成两个独立的函数来处理每个框，那么您将拥有编写正确决策逻辑的所有必要信息。

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

来源

2014-03-27 17:56:32 krischan

是的，我将不得不创建单独的函数。 – DivineChef

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

回答

相关问题