Uncheck a checkbox if another checked with javascript

Question

I have two checkbox fields. Using Javascript, I would like to make sure only one checkbox can be ticked. (e.g if one checkbox1 is ticked, if checkbox2 is ticked, checkbox1 w

Answer 1

Well you should use radio buttons, but some people like the look of checkboxes, so this should take care of it. I've added a common class to your inputs:

function cbChange(obj) {
    var cbs = document.getElementsByClassName("cb");
    for (var i = 0; i < cbs.length; i++) {
        cbs[i].checked = false;
    }
    obj.checked = true;
}

Demo: http://jsfiddle.net/5uUjj/

Answer 2

Also based on tymeJV's answer above, if you want to only deactivate the other checkbox when one is clicked you can do this:

function cbChange(obj) {
var instate=(obj.checked);
    var cbs = document.getElementsByClassName("cb");
    for (var i = 0; i < cbs.length; i++) {
        cbs[i].checked = false;
    }
    if(instate)obj.checked = true;
}

tymeJV's function does not let you have both unticked - this does. (yes, weird but true.. sometimes there's a semantic reason why you want two tickboxes not radio buttons)

Answer 3

Hope this helps:

function setFries(){
    var hotdog= document.getElementById("hotdog");
    var opt1= document.getElementById("opt1");
    var opt2 = document.getElementById("opt2");
    if(hotdog.checked){
      opt1.checked = false;
      opt2.checked = false;
    }else if(opt1.checked){
      opt2.checked = false;
     }else if(opt2.checked){
      opt1.checked = false;
    }
}

Answer 4

<input type="checkbox" name="fries" id="opt1" disabled="disabled" onclick="setFries(this);/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled" onclick="setFries(this);/>
<input type="radio" name="o1" id="hotdog" onclick="setFries(this);"/>

Note that I am using onclick event:

function setFries(obj){
   var fries = document.getElementsByName('fries');
   if(obj.id =='hotdog') //Or check for obj.type == 'radio'
   {
      for(var i=0; i<fries.length; i++)
        fries[i].checked = true;
   }
   else{
      for(var i=0; i<fries.length; i++){
         if(fries[i].id != obj.id){
           fries[i].checked = !obj.checked;
           break;
         }
      }
   }
}

Answer 5

The simplest way I found for this was to not use any sort of code at all. I triggered an actions in the check box properties. 1. mouse up to reset a form. I then unselected (for reset) all of my fields accept for my desired check boxes. I then did the same thing for my other check box to go the other way. You can basically turn the check boxes into toggles or have any sort of crazy pattern you want.