Making sure at least one checkbox is checked

Question

I have a form with multiple checkboxes and I want to use JavaScript to make sure at least one is checked  This is what I have right now but no matter what is chosen an alert pops up      JS  wrong    function valthis     if  document FC c1 checked       alert   thank you for checking a checkbox       else       alert   please check a checkbox              HTML    lt p gt Please select at least one Checkbox lt  p gt   lt br gt   lt br gt   lt form name    FC  gt   lt input type    checkbox  name    c1  value    c1   gt  C1   lt br gt   lt input type    checkbox  name    c1  value    c2   gt  C2  lt br gt   lt input type    checkbox  name    c1  value    c3   gt  C3  lt br gt    lt input type    checkbox  name    c1  value    c4   gt  C4   lt br gt   lt  form gt   lt br gt   lt br gt    lt input type    button  value    Edit and Report  onClick    valthisform     gt       So what I ended up doing in JS was this    function valthisform     var chkd   document FC c1 checked    document FC c2 checked  document FC c3 checked   document FC c4 checked   if  chkd    true       else       alert   please check a checkbox           I decided to drop the  Thank you  part to fit in with the rest of the assignment  Thank you so much  every ones advice really helped out

User · Answer

I would opt for a more functional approach. Since ES6 we have been given such nice tools to solve our problems, so why not use them. Let's begin with giving the checkboxes a class so we can round them up very nicely. I prefer to use a class instead of input[type="checkbox"] because now the solution is more generic and can be used also when you have more groups of checkboxes in your document.

HTML

    <input type="checkbox" class="checkbox" value=ck1 /> ck1<br />
    <input type="checkbox" class="checkbox" value=ck2 /> ck2<br />

JavaScript

function atLeastOneCheckboxIsChecked(){
    const checkboxes = Array.from(document.querySelectorAll(".checkbox"));
    return checkboxes.reduce((acc, curr) => acc || curr.checked, false);
}

When called, the function will return false if no checkbox has been checked and true if one or both is.

It works as follows, the reducer function has two arguments, the accumulator (acc) and the current value (curr). For every iteration over the array, the reducer will return true if either the accumulator or the current value is true. the return value of the previous iteration is the accumulator of the current iteration, therefore, if it ever is true, it will stay true until the end.

User · Answer

lt  script type    text javascript  src    js jquery-1 6 4 min js   gt    lt     script  gt        lt  script type    text javascript   gt   function checkSelectedAtleastOne clsName        if  selectedValue     select           return false       var i   0              clsName  each function               if    this  is   checked                  i   1                          if  i    0            alert  Please select atleast one users            return false        else if  i    1            return true             return true        document  ready function              chkSearchAll   click function               var checked     this  is   checked                clsChkSearch   each function                  var checkBox     this               if  checked                    checkBox prop  checked   true                 else                   checkBox prop  checked   false                                             for select and deselect  select all  check box when clicking individual check boxes         clsChkSearch   click function               var i   0              clsChkSearch   each function                   if    this  is   checked                   else                    i   1    unchecked                                     if  i    0                    chkSearchAll   attr  checked   true            else if  i    1                     chkSearchAll   attr  checked   false                            lt     script  gt

User · Answer

Vanilla JS   var checkboxes   document getElementsByClassName  activityCheckbox       puts all your checkboxes in a variable  function activitiesReset         var checkboxesChecked   function         if a checkbox is checked  function ends and returns true  If all checkboxes have been iterated through  which means they are all unchecked   returns false          for  var i   0  i  lt  checkboxes length  i                  if  checkboxes i  checked                    return true                                  return false            error 2  style display    none      an array item specific to my project - it s a red label which says  Please check a checkbox    Here its display is set to none  so the initial non-error label is visible instead           if  submitCounter  gt  0  amp  amp  checkboxesChecked       false       if a form submit has been attempted  and if all checkboxes are unchecked             error 2  style display    block      red error label is now visible               for  var i 0  i lt checkboxes length  i          whenever a checkbox is checked or unchecked  activitiesReset runs      checkboxes i  addEventListener  change   activitiesReset       Explanation  Once a form submit has been attempted  this will update your checkbox section s label to notify the user to check a checkbox if he she hasn t yet  If no checkboxes are checked  a hidden  error  label is revealed prompting the user to  Please check a checkbox    If the user checks at least one checkbox  the red label is instantaneously hidden again  revealing the original label  If the user again un-checks all checkboxes  the red label returns in real-time  This is made possible by JavaScript s onchange event  written as  addEventListener  change   function

User · Answer

You should avoid having two checkboxes with the same name if you plan to reference them like document FC c1   If you have multiple checkboxes named c1 how will the browser know which you are referring to   Here s a non-jQuery solution to check if any checkboxes on the page are checked   var checkboxes   document querySelectorAll  input type  checkbox      var checkedOne   Array prototype slice call checkboxes  some x   gt  x checked     You need the Array prototype slice call part to convert the NodeList returned by document querySelectorAll into an array that you can call some on

User · Answer

Prevent user from deselecting last checked checkbox  jQuery  original answer       input type  checkbox   name  chkBx     on  change  function        var getArrVal      input type  checkbox   name  chkBx   checked   map function            return this value         toArray         if getArrVal length             execute the code             msg   html getArrVal toString            else             this  prop  checked  true               msg   html  At least one value must be checked             return false               UPDATED ANSWER 2019-05-31 Plain JS   x000D   x000D  let i  x000D      el   document querySelectorAll  input type  checkbox   name  chkBx      x000D      msg   document getElementById  msg    x000D      onChange   function ev   x000D          ev preventDefault    x000D          let  this   this  x000D              arrVal   Array prototype slice call  x000D                  document querySelectorAll  input type  checkbox   name  chkBx   checked    x000D                       map function cur  return cur value    x000D   x000D          if arrVal length   x000D              msg innerHTML   JSON stringify arrVal   x000D            else   x000D               this checked true  x000D              msg innerHTML    At least one value must be checked    x000D            x000D         x000D   x000D  for i el length i--   el i  addEventListener  change  onChange false    x000D   lt label gt  lt input type  checkbox  name  chkBx  value  value1  checked gt  Value1 lt  label gt  x000D   lt label gt  lt input type  checkbox  name  chkBx  value  value2  gt  Value2 lt  label gt  x000D   lt label gt  lt input type  checkbox  name  chkBx  value  value3  gt  Value3 lt  label gt  x000D   lt div id  msg  gt  lt  div gt  x000D   x000D   x000D

User · Answer

if      checkboxid1   is   checked            checkboxid2   is   checked                        checkboxid3   is   checked          Your Code here     You can use this code to verify that checkbox is checked at least one   Thanks

User · Answer

Check this   You can t access form inputs via their name  Use document getElements methods instead

User · Answer

This should work   function valthisform         var checkboxs document getElementsByName  c1        var okay false      for var i 0 l checkboxs length i lt l i                  if checkboxs i  checked                        okay true              break                      if okay alert  Thank you for checking a checkbox        else alert  Please check a checkbox        If you have a question about the code  just comment     I use l checkboxs length to improve the performance  See http   www erichynds com javascript javascript-loop-performance-caching-the-length-property-of-an-array

User · Answer

You can check that atleast one checkbox is checked or not using this simple code  You can also drop your message   Reference Link   lt label class  control-label col-sm-4  gt Check Box 2 lt  label gt       lt input type  checkbox  name  checkbox2  id  checkbox2  value ck1   gt  ck1 lt br   gt       lt input type  checkbox  name  checkbox2  id  checkbox2  value ck2   gt  ck2 lt br   gt    lt script gt  function checkFormData         if      input name checkbox2  checked   length  gt  0            document getElementById  errMessage   innerHTML    Check Box 2 can not be null           return false            alert  Success        return true     lt  script gt

[javascript] Making sure at least one checkbox is checked

Examples related to javascript

Examples related to html

Examples related to checkbox