Question

我在表单中有15个复选框。此复选框与彼此独立。我想要一个javascript函数，当用户选择2个复选框时，第一个复选框被取消选中，第二个复选框仍然被选中。

Answer 1

根据此网站，您最好使用单选按钮而不是复选框：http://www.echoecho.com/htmlforms10.htm？

如果您想使用复选框，我猜您可以这样做：

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

Javascript代码：

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

Answer 2

Check Fiddle

为您提供名称复选框，让myCheckbox＆＃39;。
点击复选框循环显示所有名称＆＃39; myCheckbox＆＃39;;
make＆＃39; myCheckbox＆＃39; uncheck。
制作点击复选框checked。

<强> 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)"/>

<强>的JavaScript

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

Answer 3

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

信用到：http://forums.devshed.com/html-programming-1/make-checkboxes-exclusive-55312.html

Answer 4

这可以像这样检查......

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

<body>

 <input type="checkbox" value="check1" size="46" id="check1" onclick="call(this)"/>

 <input type="checkbox" value="check2" size="46" id="check2" onclick="call(this)"/>

 <input type="checkbox" value="check3" size="46" id="check3" onclick="call(this)"/>

</body>

Answer 5

使用单选按钮而不是复选框会更容易。这样你就可以一次只选择一个你真正想要的选项。

Answer 6

可以这样检查：

在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)"/>

Answer 7

我是从John的答案中创建了这个CodePen，但我添加了取消选中所有复选框的功能。

HTML：

<br />
<br />

<div class="container">
  <div class="field">
    <p class="control">
  <label class="checkbox">
    <input type="checkbox" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 1
  </label>
</p>
    <p class="control">
  <label class="checkbox">
    <input type="checkbox" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 2
  </label>
</p>
<p class="control">
  <label class="checkbox">
  <input type="checkbox" id="Check3" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 3
  </label>
</p>
<p class="control">
  <label class="checkbox">
  <input type="checkbox" id="Check4" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 4
  </label>
</p>

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

https://codepen.io/thomasweld/pen/Pmaega?editors=1010

Answer 8

您可以做的是使用输入类型无线电并为所有这些设置通用名称。如果您尝试检查另一个，它将自动取消选中第一个。

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

至少这更简单

Answer 9

这样您将只有一个复选框，您也可以取消选中该复选框。

HTML

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

只选中一个复选框

9 个答案:

Check Fiddle