Javascript 仅选中一个复选框_Javascript_Html

Javascript 仅选中一个复选框

javascript html

Javascript 仅选中一个复选框,javascript,html,Javascript,Html,我在表格中有15个复选框。此复选框相互独立。我想要一个javascript函数，当用户选择2个复选框时，第一个复选框将被取消选中，第二个复选框将保持选中状态。 <html> <head> <title>FooBar</title> <script language="javascript"> function checkOnly(stayChecked) { with(document.myForm) { f

我在表格中有15个复选框。此复选框相互独立。我想要一个javascript函数，当用户选择2个复选框时，第一个复选框将被取消选中，第二个复选框将保持选中状态。


<html>

<head>
<title>FooBar</title>
<script language="javascript">
function checkOnly(stayChecked)
  {
  with(document.myForm)
    {
    for(i = 0; i < elements.length; i++)
      {
      if(elements[i].checked == true && elements[i].name != stayChecked.name)
        {
        elements[i].checked = false;
        }
      }
    }
  }        
</script>
</head>

<body>
<form name="myForm">
<input type="checkbox" name="cb1" value="1" onclick="checkOnly(this)">
<input type="checkbox" name="cb2" value="1" onclick="checkOnly(this)">
<input type="checkbox" name="cb3" value="1" onclick="checkOnly(this)">
</form>
</body>

</html>

福巴
仅功能检查（保留检查）
{
with（document.myForm）
{
对于（i=0；i


归功于：
您是否最好使用单选按钮而不是本网站的复选框：
如果您想使用复选框，我想您可以这样做：
HTML代码：
<input type="checkbox" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 1
<input type="checkbox" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 2
<input type="checkbox" id="Check3" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 3
<input type="checkbox" id="Check4" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 4

选项1
选择2
选择3
选择4

Javascript代码：
function selectOnlyThis(id) {
    for (var i = 1;i <= 4; i++)
    {
        document.getElementById("Check" + i).checked = false;
    }
    document.getElementById(id).checked = true;
}

功能仅选择此（id）{
对于（var i=1；i这可能可以这样检查
          <script type="text/javascript">
                  var call = function(obj){
                  var res=obj.value;
                  obj.checked=true;

                  for(var i=1;i<=3;i++)
                  {
                       if(document.getElementById("check"+i).value!=res )
                       {
                        document.getElementById("check"+i).checked=false;
                       }
                  }
                                          }
          </script>


变量调用=函数（obj）{
var res=目标价值；
检查对象=正确；
对于（var i=1；i而言，使用单选按钮比使用复选框要容易得多。这样一来，您一次只能选择一个您真正想要的选项。
可以这样检查：
在javascript上：
function call(no, value) {
    if(no== 0){
        document.frmMTR.check2.checked = false
        document.frmMTR.check3.checked = false;     
    }
    else if(no== 1){
        document.frmMTR.check1.checked = false
        document.frmMTR.check3.checked = false; 
    }
    else if(no== 2){
        document.frmMTR.check1.checked = false
        document.frmMTR.check2.checked = false; 
    }
}

在html中：
 <input type="checkbox" name="check1" size="46" id="check1" onclick="call(0,this)"/>
 <input type="checkbox" name="check2" size="46" id="check2" onclick="call(1,this)"/>
 <input type="checkbox" name="check3" size="46" id="check3" onclick="call(2,this)"/>



给出你的名字复选框让“myCheckbox”
点击复选框，循环通过名为“myCheckbox”的所有复选框
使“我的复选框”取消选中
选中已单击的复选框
HTML
<input type="checkbox" name="myCheckbox" value="1" onclick="selectOnlyThis(this)" />
<input type="checkbox" name="myCheckbox" value="2" onclick="selectOnlyThis(this)"/>
<input type="checkbox" name="myCheckbox" value="3" onclick="selectOnlyThis(this)"/>

<input type="checkbox" id="CheckId1" onchange="oneCheckedBox(this.id)" /> 
<input type="checkbox" id="CheckId2" onchange="oneCheckedBox(this.id)" /> 
<input type="checkbox" id="CheckId3" onchange="oneCheckedBox(this.id)" /> 
<input type="checkbox" id="CheckId4" onchange="oneCheckedBox(this.id)" />

我根据John的答案创建了这个代码笔，但我添加了取消选中所有复选框的功能
HTML:






选择1


选择2


选择3


选择4




JavaScript:
function selectOnlyThis(id) {
for (var i = 1;i <= 4; i++){
    if ("Check" + i === id && document.getElementById("Check" + i).checked === true){
            document.getElementById("Check" + i).checked = true;
            } else {
              document.getElementById("Check" + i).checked = false;
            }
    }  
}

功能仅选择此（id）{
对于（var i=1；i您可以改为使用输入型收音机，并为所有这些设置一个通用名称。如果您尝试选中另一个，它将自动取消选中第一个
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other<br><br>
  <input type="submit">
</form> 

</body>
</html>


男性

女性

其他



至少这更简单
这样，您只有一个复选框，也可以取消选中该复选框
HTML
<input type="checkbox" name="myCheckbox" value="1" onclick="selectOnlyThis(this)" />
<input type="checkbox" name="myCheckbox" value="2" onclick="selectOnlyThis(this)"/>
<input type="checkbox" name="myCheckbox" value="3" onclick="selectOnlyThis(this)"/>

<input type="checkbox" id="CheckId1" onchange="oneCheckedBox(this.id)" /> 
<input type="checkbox" id="CheckId2" onchange="oneCheckedBox(this.id)" /> 
<input type="checkbox" id="CheckId3" onchange="oneCheckedBox(this.id)" /> 
<input type="checkbox" id="CheckId4" onchange="oneCheckedBox(this.id)" />



Javascript
function selectOnlyThis(id){
  var myCheckbox = document.getElementsByName("myCheckbox");
  Array.prototype.forEach.call(myCheckbox,function(el){
    el.checked = false;
  });
  id.checked = true;
}

function oneCheckedBox(checkbox_id) {
    if (document.getElementById(checkbox_id).checked) {
        for (var i = 1; i < 5; i++) {
            document.getElementById("CheckId"+i).checked = false;
        }
        document.getElementById(checkbox_id).checked = true;
    }
}

功能一复选框（复选框id）{
if（document.getElementById（checkbox\u id）.checked）{
对于（变量i=1；i<5；i++）{
document.getElementById（“CheckId”+i）.checked=false；
}
document.getElementById（checkbox\u id）.checked=true；
}
}
？如果它们彼此独立，为什么要使它们相互依赖，并复制单选输入？如果没有JavaScript来强制执行此行为，会发生什么？请使用单选按钮，并为它们指定相同的名称。对于用户界面也更好，这样他就不会混淆-这就是单选按钮的用途。请检查此项s、 如果（elements[i]！=stayChecked&&elements[i].checked）elements[i].checked=false将更简单地表示为，并且stayChecked具有比document更好的form属性。myFormI相信它应该是for（var i=1；i它当然应该是。我已经相应地修改了代码段，谢谢：）这非常有效！