Only one selected checkbox

后端未结

关注

 8  1781

I have 15 check boxes in a form. This checkboxes are independent to eachother. I want a javascript function that makes, when user is selecting 2 checkboxes, the first checke

相关标签:

8条回答

旧巷少年郎

2021-01-14 05:27

It would be much easier to use radio buttons rather than a checkbox. That way you can select only one option at a time which is what you want really.

0 讨论(0)
发布评论:

提交评论
- 加载中...

不思量自难忘°

2021-01-14 05:28

I created this CodePen off of John's answer, but I added the ability to uncheck all checkboxes.

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

0 讨论(0)

既然无缘

2021-01-14 05:31

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

credits to: http://forums.devshed.com/html-programming-1/make-checkboxes-exclusive-55312.html

0 讨论(0)

南笙

2021-01-14 05:35

What you can do instead is to use input type radio and set a common name for all of them. If you try to check another, it will automatically uncheck first one.

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

At least this is simpler

0 讨论(0)

广开言路

2021-01-14 05:37

Can check like this:

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

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

0 讨论(0)

野的像风

2021-01-14 05:42

This can be probably checked like this ...

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

0 讨论(0)

1 2 下一页