html select only one checkbox in a group

Question

So how can I only allow a user to select only one checkbox   I know radio buttons are  ideal   but for my purpose   it s not   I have a field where users need to select either or of the two options  but not both  The problem is that I need my users to also be able to unselect their option  and this is where radio buttons fail because once you select the group  you have to choose an option   I will be validating the info via php  but I d still like to restrict the users to one answer if they want to give it

User · Answer

The Code snippet below demonstrates a simple approach for selecting only one checkbox in a group.

_x000D_

  <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <h3>Demonstration of Checkbox Toggle</h3>
    <p>
        <span><b>Letters:</b></span>
        A<input type="checkbox" name="A" >
        B<input type="checkbox" name="B" >
        C<input type="checkbox" name="C" >
        D<input type="checkbox" name="D" >
    </p>
    <p>
        <span><b>Numbers:</b></span>
        1<input type="checkbox" name="1" >
        2<input type="checkbox" name="2" >
        3<input type="checkbox" name="3" >
    </p>
     <p>
        <span><b>Birds:</b></span>
        Scarlet Ibis<input type="checkbox" name="Scarlet Ibis" >
        Cocrico <input type="checkbox" name="Cocrico" >
        hummingbird <input type="checkbox" name="hummingbird" >
    </p>
</body>

<script>
    $(function()
    {
        function toggle(choices,name) 
        {
            if(choices.includes(name))
            {
                for( i=0;i<choices.length;i++)
                {
                if(name !=choices[i])
                    $('input[name="' + choices[i] + '"]').not(this).prop('checked', false); 
                }
            }
        }
        $('input[type="checkbox"]').on('change', function() 
        {
            var letters = ["A","B","C","D"];
            var numbers = ["1", "2", "3"];
            var birds = ["Scarlet Ibis", "Cocrico", "hummingbird"];
            
            toggle(letters,this.name);
            toggle(numbers,this.name);
            toggle(birds,this.name);
        });

    });
</script>
</html>

_x000D_

User · Answer

x000D   x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  http   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt  x000D     lt script gt  x000D      angular module  app       controller  appc      scope   x000D        function  scope    x000D           scope selected    male   x000D          x000D          x000D     lt  script gt  x000D   lt  head gt  x000D   x000D   lt body ng-app  app  ng-controller  appc  gt  x000D     lt label gt SELECTED    selected   lt  label gt  x000D     lt div gt  x000D       lt input type  checkbox  ng-checked  selected   male   ng-true-value   male   ng-model  selected  gt Male x000D       lt br gt  x000D       lt input type  checkbox  ng-checked  selected   female   ng-true-value   female   ng-model  selected  gt Female x000D       lt br gt  x000D       lt input type  checkbox  ng-checked  selected   other   ng-true-value   other   ng-model  selected  gt Other x000D     lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

While JS is probably the way to go  it could be done with HTML and CSS only   Here you have a fake radio button which is really a label for a real hidden radio button  By doing that  you get exactly the effect you need    lt style gt      uncheck gt input   display  none      input checked   label   display  none      input not  checked    label   label  display  none     lt  style gt    lt div id  uncheck  gt     lt input type  radio  name  food  id  box1    gt     Pizza       lt label for  box1  gt  amp  9678  lt  label gt        lt label for  box0  gt  amp  9673  lt  label gt     lt input type  radio  name  food  id  box2    gt     Ice cream       lt label for  box2  gt  amp  9678  lt  label gt        lt label for  box0  gt  amp  9673  lt  label gt     lt input type  radio  name  food  id  box0  checked   gt   lt  div gt    See it here  https   jsfiddle net tn70yxL8 2   Now  that assumes you need non-selectable labels   If you were willing to include the labels  you can technically avoid repeating the  uncheck  label by changing its text in CSS  see here  https   jsfiddle net 7tdb6quy 2

User · Answer

This snippet will    Allow grouping like Radio buttons Act like Radio Allow unselecting all    x000D   x000D     the selector will match all input controls of type  checkbox x000D     and attach a click event handler  x000D     input checkbox   on  click   function     x000D       in the handler   this  refers to the box clicked on x000D    var  box     this   x000D    if   box is   checked      x000D         the name of the box is retrieved using the  attr   method x000D         as it is assumed and expected to be immutable x000D      var group    input checkbox name       box attr  name           x000D         the checked state of the group box on the other hand will change x000D         and the current value is retrieved using  prop   method x000D        group  prop  checked   false   x000D       box prop  checked   true   x000D      else   x000D       box prop  checked   false   x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt div gt  x000D     lt h3 gt Fruits lt  h3 gt  x000D     lt label gt  x000D       lt input type  checkbox  class  radio  value  1  name  fooby 1       gt Kiwi lt  label gt  x000D     lt label gt  x000D       lt input type  checkbox  class  radio  value  1  name  fooby 1       gt Jackfruit lt  label gt  x000D     lt label gt  x000D       lt input type  checkbox  class  radio  value  1  name  fooby 1       gt Mango lt  label gt  x000D   lt  div gt  x000D   lt div gt  x000D     lt h3 gt Animals lt  h3 gt  x000D     lt label gt  x000D       lt input type  checkbox  class  radio  value  1  name  fooby 2       gt Tiger lt  label gt  x000D     lt label gt  x000D       lt input type  checkbox  class  radio  value  1  name  fooby 2       gt Sloth lt  label gt  x000D     lt label gt  x000D       lt input type  checkbox  class  radio  value  1  name  fooby 2       gt Cheetah lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There are already a few answers to this based on pure JS but none of them are quite as concise as I would like them to be   Here is my solution based on using name tags  as with radio buttons  and a few lines of javascript    x000D   x000D  function onlyOne checkbox    x000D      var checkboxes   document getElementsByName  check   x000D      checkboxes forEach  item    gt    x000D          if  item     checkbox  item checked   false x000D         x000D    x000D   lt input type  checkbox  name  check  onclick  onlyOne this   gt  x000D   lt input type  checkbox  name  check  onclick  onlyOne this   gt  x000D   lt input type  checkbox  name  check  onclick  onlyOne this   gt  x000D   lt input type  checkbox  name  check  onclick  onlyOne this   gt  x000D   x000D   x000D

User · Answer

Here is a simple HTML and JavaScript solution I prefer     js function to allow only checking of one weekday checkbox at a time   function checkOnlyOne b    var x   document getElementsByClassName  daychecks    var i   for  i   0  i  lt  x length  i        if x i  value    b  x i  checked   false        Day of the week   lt input class  daychecks  onclick  checkOnlyOne this value    type  checkbox  name  reoccur weekday  value  Monday    gt Mon amp nbsp  amp nbsp  amp nbsp   lt input class  daychecks  onclick  checkOnlyOne this value    type  checkbox  name  reoccur weekday  value  Tuesday    gt Tue amp nbsp  amp nbsp  amp nbsp   lt input class  daychecks  onclick  checkOnlyOne this value    type  checkbox  name  reoccur weekday  value  Wednesday    gt Wed amp nbsp  amp nbsp  amp nbsp   lt input class  daychecks  onclick  checkOnlyOne this value    type  checkbox  name  reoccur weekday  value  Thursday    gt Thu amp nbsp  amp nbsp  amp nbsp   lt input class  daychecks  onclick  checkOnlyOne this value    type  checkbox  name  reoccur weekday  value  Friday    gt Fri amp nbsp  amp nbsp  amp nbsp   lt input class  daychecks  onclick  checkOnlyOne this value    type  checkbox  name  reoccur weekday  value  Saturday    gt Sat amp nbsp  amp nbsp  amp nbsp   lt input class  daychecks  onclick  checkOnlyOne this value    type  checkbox  name  reoccur weekday  value  Sunday    gt Sun amp nbsp  amp nbsp  amp nbsp  lt br   gt  lt br   gt

User · Answer

Here is a solution using JQuery      lt input type    checkbox  class  a   gt one      lt input type    checkbox  class  a   gt two      lt input type    checkbox  class  a   gt three      lt script gt             a   on  change   function                     a   not this  prop  checked  false                lt  script gt

User · Answer

Building up on billyonecan s answer  you can use the following code if you need that snippet for more than one checkbox  assuming they have different names           input one   on  change   function             var name     this  attr  name               input name   name    one   not this  prop  checked   false

User · Answer

myform input checkbox   change function             myform input checkbox   attr  checked   false         this  attr  checked   true         This should work for any number of checkboxes in the form   If you have others that aren t part of the group  set up the selectors the applicable inputs

User · Answer

My version  use data attributes and Vanilla JavaScript   lt div class  test-checkbox  gt      Group One   lt label gt           lt input type  checkbox  data-limit  only-one-in-a-group  name  groupOne  value  Eat    gt Eat lt  label gt       lt label gt           lt input type  checkbox  data-limit  only-one-in-a-group  name  groupOne  value  Sleep    gt Sleep lt  label gt       lt label gt           lt input type  checkbox  data-limit  only-one-in-a-group  name  groupOne  value  Play    gt Play lt  label gt       lt br   gt      Group Two   lt label gt           lt input type  checkbox  data-limit  only-one-in-a-group  name  groupTwo  value  Fat    gt Fat lt  label gt       lt label gt           lt input type  checkbox  data-limit  only-one-in-a-group  name  groupTwo  value  Comfort    gt Comfort lt  label gt       lt label gt           lt input type  checkbox  data-limit  only-one-in-a-group  name  groupTwo  value  Happy    gt Happy lt  label gt   lt  div gt   lt script gt      let cbxes   document querySelectorAll  input type  checkbox   data-limit  only-one-in-a-group              cbxes  forEach  cbx    gt            cbx addEventListener  change    e    gt                if  e target checked                  uncheckOthers e target                           function uncheckOthers  clicked            let name   clicked getAttribute  name               find others in same group  uncheck them             cbxes  forEach  other    gt                if  other    clicked  amp  amp  other getAttribute  name      name                  other checked   false                     lt  script gt

User · Answer

Necromancing   And without jQuery  for a checkbox structure like this    lt label gt   lt input type  checkbox  id  mytrackers 1  name  blubb 1  value    gt --- Bitte ausw amp  228 hlen ---  lt  label gt   lt label gt   lt input type  checkbox  id  mytrackers 2  name  blubb 2  value  7  gt Testtracker  lt  label gt   lt label gt   lt input type  checkbox  id  mytrackers 3  name  blubb 3  value  3  gt Kundenanfrage  lt  label gt   lt label gt   lt input type  checkbox  id  mytrackers 4  name  blubb 4  value  2  gt Anpassung  lt  label gt   lt label gt   lt input type  checkbox  id  mytrackers 5  name  blubb 5  value  1  checked  checked   gt Fehler  lt  label gt   lt label gt   lt input type  checkbox  id  mytrackers 6  name  blubb 6  value  4  gt Bedienung  lt  label gt   lt label gt   lt input type  checkbox  id  mytrackers 7  name  blubb 7  value  5  gt Internes  lt  label gt   lt label gt   lt input type  checkbox  id  mytrackers 8  name  blubb 8  value  6  gt  amp  196 nderungswunsch  lt  label gt    you would do it like this           attach an event handler  now or in the future           for all elements which match childselector          within the child tree of the element maching parentSelector      function subscribeEvent parentSelector  eventName  childSelector  eventCallback            if  parentSelector    null              throw new ReferenceError  Parameter parentSelector is NULL            if  childSelector    null              throw new ReferenceError  Parameter childSelector is NULL               nodeToObserve  the node that will be observed for mutations         var nodeToObserve   parentSelector          if  typeof  parentSelector       string               nodeToObserve   document querySelector parentSelector           var eligibleChildren   nodeToObserve querySelectorAll childSelector           for  var i   0  i  lt  eligibleChildren length    i                eligibleChildren i  addEventListener eventName  eventCallback  false                Next i             https   stackoverflow com questions 2712136 how-do-i-make-this-loop-all-children-recursively         function allDescendants node                if  node    null                  return              for  var i   0  i  lt  node childNodes length  i                      var child   node childNodes i                   allDescendants child                    Next i                 IE 11 Polyfill              if   Element prototype matches                  Element prototype matches   Element prototype msMatchesSelector              if  node matches                    if  node matches childSelector                            console log  match                        node addEventListener eventName  eventCallback  false                        End if    lt Element gt node  matches childSelector                      else console log  no match                     End if    lt Element gt node  matches                  else console log  no matchfunction                 End Function allDescendants             Callback function to execute when mutations are observed         var callback   function  mutationsList  observer                for  var  i   0  mutationsList 1   mutationsList   i  lt  mutationsList 1 length   i                      var mutation   mutationsList 1  i                      console log  mutation type   mutation type                      console log  mutation   mutation                   if  mutation type     childList                         for  var i   0  i  lt  mutation addedNodes length    i                            var thisNode   mutation addedNodes i                           allDescendants thisNode                            Next i                       End if  mutation type     childList                       else if  mutation type     attributes     console log  The     mutation attributeName     attribute was modified                      Next mutation                End Function callback             Options for the observer  which mutations to observe          var config     attributes  false  childList  true  subtree  true               Create an observer instance linked to the callback function         var observer   new MutationObserver callback              Start observing the target node for configured mutations         observer observe nodeToObserve  config            End Function subscribeEvent        function radioCheckbox onClick                      console log  click   this           let box   this          if  box checked                         let name   box getAttribute  name                let pos   name lastIndexOf                   if  pos     -1  name   name substr 0  pos                let group    input type  checkbox   name       name                        console log group               let eles   document querySelectorAll group                  console log eles               for  let j   0  j  lt  eles length    j                                 eles j  checked   false                            box checked   true                    else             box checked   false                 https   stackoverflow com questions 9709209 html-select-only-one-checkbox-in-a-group     function radioCheckbox                     on instead of document            let elements   document querySelectorAll  input type  checkbox              for  let i   0  i  lt  elements length    i                           console log elements i                elements i  addEventListener  click   radioCheckbox onClick  false                 Next i            End Function radioCheckbox        function onDomReady                 console log  dom ready            subscribeEvent document   click                 input type  checkbox                  radioCheckbox onClick                         radioCheckbox               if  document addEventListener  document addEventListener  DOMContentLoaded   onDomReady  false       else if  document attachEvent  document attachEvent  onreadystatechange   onDomReady       else window onload   onDomReady       function onPageLoaded             console log  page loaded               if  window addEventListener  window addEventListener  load   onPageLoaded  false       else if  window attachEvent  window attachEvent  onload   onPageLoaded       else window onload   onPageLoaded

User · Answer

If someone need a solution without an external javascript libraries you could use this example  A group of checkboxes allowing 0  1 values  You may click on the checkbox component or associated label text        lt input id  mygroup1  name  mygroup  type  checkbox  value  1  onclick  toggleRadioCheckbox this     gt   lt label for  mygroup1  gt Yes lt  label gt       lt input id  mygroup0  name  mygroup  type  checkbox  value  0  onclick  toggleRadioCheckbox this     gt   lt label for  mygroup0  gt No lt  label gt   - - - - - - - -       function toggleRadioCheckbox sender               RadioCheckbox  0  1 enabled in a group          if   sender checked  return          var fields   document getElementsByName sender name           for var idx 0  idx lt fields length  idx                  var field   fields idx               if  field checked  amp  amp  field  sender                  field checked false

User · Answer

Example With AngularJs   x000D   x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  http   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt  x000D     lt script gt  x000D      angular module  app       controller  appc      scope   x000D        function  scope    x000D           scope selected    other   x000D          x000D          x000D     lt  script gt  x000D   lt  head gt  x000D   x000D   lt body ng-app  app  ng-controller  appc  gt  x000D     lt label gt SELECTED    selected   lt  label gt  x000D     lt div gt  x000D       lt input type  checkbox  ng-checked  selected   male   ng-true-value   male   ng-model  selected  gt Male x000D       lt br gt  x000D       lt input type  checkbox  ng-checked  selected   female   ng-true-value   female   ng-model  selected  gt Female x000D       lt br gt  x000D       lt input type  checkbox  ng-checked  selected   other   ng-true-value   other   ng-model  selected  gt Other x000D     lt  div gt  x000D   x000D   x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

May this code helps you    x000D   x000D    document  ready function    x000D      slectOne   on  change   function     x000D         slectOne   not this  prop  checked   false   x000D         result   html   this  data   id      x000D     if   this  is   checked    x000D          result   html   this  data   id      x000D     else x000D          result   html  Empty        x000D      x000D      x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt  head gt  x000D   lt body gt  x000D   lt input type  checkbox  class  slectOne  data-id  1 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  2 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  3 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  4 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  5 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  6 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  7 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  8 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  9 selected   gt  x000D   lt input type  checkbox  class  slectOne  data-id  10 selected   gt  x000D   lt span id  result  gt  lt  span gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Working link Click here

User · Answer

Checkbox Group  x000D   x000D  var group   el callback   gt   el forEach  checkbox   gt   callback checkbox             group  document getElementsByName  check    item   gt   item onclick  e   gt   group  document getElementsByName  check    item   gt   item checked false     e target checked true        x000D   lt input type  checkbox  name  check   gt   lt input type  checkbox  name  check   gt   lt input type  checkbox  name  check   gt   lt input type  checkbox  name  check  gt  x000D   x000D   x000D   checkbox simple without loop  x000D   x000D  var last  document addEventListener  input   e   gt   if e target getAttribute  name     myRadios    if last  last checked false    e target checked true  last e target     x000D   lt input type  checkbox  name  myRadios  value  1    gt  1  lt input type  checkbox  name  myRadios  value  2    gt  2 x000D   x000D   x000D   Group By Single Div  x000D   x000D  var group   el callback   gt   el forEach  checkbox   gt   callback checkbox            var group el document querySelectorAll    data-name   gt  input   group  group el  item   gt   item onclick  e   gt   group  group el  item   gt   item checked false      e target checked true       x000D   lt div data-name  check  gt   lt input type  checkbox  gt   lt input type  checkbox  gt   lt input type  checkbox  gt   lt input type  checkbox  gt   lt  div gt  x000D   x000D   x000D   css single group div  x000D   x000D  var last  document addEventListener  input   e   gt   var closest e target closest    data-name  check      console log closest  if e target closest    data-name      if last  last checked false     e target checked true  last e target     x000D   lt div data-name  check  gt   lt input type  checkbox  value  1    gt  1  lt input type  checkbox  value  2    gt  2  lt  div gt  x000D   x000D   x000D   check  uncheck and single checked box  x000D   x000D  var last  document addEventListener  input   e   gt   var closest e target closest    data-name  check      if e target closest    data-name      if last  last checked false    if e target   last  last e target  else last undefined     x000D   lt div data-name  check  gt   lt input type  checkbox  value  1    gt  1  lt input type  checkbox  value  2    gt  2  lt  div gt  x000D   x000D   x000D

User · Answer

Radio buttons are ideal  You just need a third  neither  option that is select by default

User · Answer

You d want to bind a change   handler so that the event will fire when the state of a checkbox changes  Then  just deselect all checkboxes apart from the one which triggered the handler      input type  checkbox     on  change   function           input type  checkbox     not this  prop  checked   false         Here s a fiddle    As for grouping  if your checkbox  groups  were all siblings    lt div gt       lt input type  checkbox    gt       lt input type  checkbox    gt       lt input type  checkbox    gt   lt  div gt     lt div gt       lt input type  checkbox    gt       lt input type  checkbox    gt       lt input type  checkbox    gt   lt  div gt      lt div gt       lt input type  checkbox    gt       lt input type  checkbox    gt       lt input type  checkbox    gt   lt  div gt    You could do this      input type  checkbox     on  change   function          this  siblings  input type  checkbox     prop  checked   false         Here s another fiddle    If your checkboxes are grouped by another attribute  such as name    lt input type  checkbox  name  group1      gt   lt input type  checkbox  name  group1      gt   lt input type  checkbox  name  group1      gt    lt input type  checkbox  name  group2      gt   lt input type  checkbox  name  group2      gt   lt input type  checkbox  name  group2      gt    lt input type  checkbox  name  group3      gt   lt input type  checkbox  name  group3      gt   lt input type  checkbox  name  group3      gt    You could do this      input type  checkbox     on  change   function            input name      this name         not this  prop  checked   false         Here s another fiddle

User · Answer

With plain old javascript   lt html gt   lt head gt   lt  head gt   lt body gt   lt input type  quot checkbox quot  name  quot group1   quot  id  quot groupname1 quot  onClick  quot toggle 1  groupname   quot   gt   lt input type  quot checkbox quot  name  quot group1   quot  id  quot groupname2 quot  onClick  quot toggle 2  groupname   quot     gt   lt input type  quot checkbox quot  name  quot group1   quot  id  quot groupname3 quot  onClick  quot toggle 3  groupname   quot    gt    lt input type  quot checkbox quot  name  quot group2   quot  id  quot diffGroupname1 quot  onClick  quot toggle 1  diffGroupname   quot   gt   lt input type  quot checkbox quot  name  quot group2   quot  id  quot diffGroupname2 quot  onClick  quot toggle 2  diffGroupname   quot     gt   lt input type  quot checkbox quot  name  quot group2   quot  id  quot diffGroupname3 quot  onClick  quot toggle 3  diffGroupname   quot    gt   lt script gt  function toggle which group   var counter 1  var checkbox document getElementById group counter   while checkbox   if counter  which     else  checkbox checked false    counter    checkbox document getElementById group counter        lt  script gt   lt  body gt   lt  html gt   edit  also possible  lt html gt   lt head gt   lt  head gt   lt body gt   lt input type  quot checkbox quot  name  quot group1   quot  class  quot groupname quot  onClick  quot toggle this  groupname   quot   gt   lt input type  quot checkbox quot  name  quot group1   quot  class  quot groupname quot  onClick  quot toggle this  groupname   quot     gt   lt input type  quot checkbox quot  name  quot group1   quot  class  quot groupname quot  onClick  quot toggle this  groupname   quot    gt    lt input type  quot checkbox quot  name  quot group2   quot  class  quot diffGroupname quot  onClick  quot toggle this  diffGroupname   quot   gt   lt input type  quot checkbox quot  name  quot group2   quot  class  quot diffGroupname quot  onClick  quot toggle this  diffGroupname   quot     gt   lt input type  quot checkbox quot  name  quot group2   quot  class  quot diffGroupname quot  onClick  quot toggle this  diffGroupname   quot    gt   lt script gt  function toggle which theClass   var checkbox document getElementsByClassName theClass   for var i 0 i lt checkbox length i     if checkbox i   which     else  checkbox i  checked false         lt  script gt   lt  body gt   lt  html gt

[html] html select only one checkbox in a group

Examples related to html

Examples related to checkbox