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 will untick)

<input name="fries" type="checkbox" disabled="disabled" id="opt1"/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled"/>

I would also like to have a radio button beneath, if this is clicked, I would like both checkboxes to be unticked.

 <input type="radio" name="o1" id="hotdog" onchange="setFries();"/>

Would the best way to do this be by writing a function, or could I use onclick statements?

Maybe vica versa -- two radios and a checkbox underneath?

VisioN
– VisioN

2013-10-14 14:15:10 +00:00
Commented Oct 14, 2013 at 14:15 — VisioN
– VisioN, Commented Oct 14, 2013 at 14:15
Well, the best way would be to just use radio buttons.

tymeJV
– tymeJV

2013-10-14 14:15:11 +00:00
Commented Oct 14, 2013 at 14:15 — tymeJV
– tymeJV, Commented Oct 14, 2013 at 14:15
why did you use checkbox and not just radio button?

peernohell
– peernohell

2013-10-14 14:16:31 +00:00
Commented Oct 14, 2013 at 14:16 — peernohell
– peernohell, Commented Oct 14, 2013 at 14:16
Radio buttons are made specifically for this purpose.

Rick Suggs
– Rick Suggs

2013-10-14 14:16:44 +00:00
Commented Oct 14, 2013 at 14:16 — Rick Suggs
– Rick Suggs, Commented Oct 14, 2013 at 14:16
Yet another proposition of radio buttons.

Yaroslav
– Yaroslav

2013-10-14 14:17:57 +00:00
Commented Oct 14, 2013 at 14:17 — Yaroslav
– Yaroslav, Commented Oct 14, 2013 at 14:17

tymeJV · Accepted Answer · 2013-10-14 14:19:02Z

19

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/

answered Oct 14, 2013 at 14:19

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VisioN Over a year ago

If you like the look of checkboxes, you should better overlay radios with images.

scott Over a year ago

thanks very much, exactly what I meant. I specifically wanted to use checkboxes in this example.

anoldermark · Accepted Answer · 2015-02-13 18:14:18Z

4

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)

answered Feb 13, 2015 at 18:14

anoldermark

3783 silver badges9 bronze badges

Comments

Ramesh Kotha · Accepted Answer · 2013-10-14 14:25:45Z

1

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

answered Oct 14, 2013 at 14:25

Ramesh Kotha

8,35217 gold badges68 silver badges91 bronze badges

Comments

Indi · Accepted Answer · 2013-10-14 14:29:31Z

1

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

answered Oct 14, 2013 at 14:29

Indi

33.9k7 gold badges61 silver badges80 bronze badges

Comments

user11020861 · Accepted Answer · 2019-02-06 04:00:05Z

0

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.

answered Feb 6, 2019 at 4:00

user11020861

1

Collectives™ on Stack Overflow

Uncheck a checkbox if another checked with javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related