Select All checkboxes using jQuery

Question

I have the following html code        lt input type  checkbox  id  ckbCheckAll    gt       lt p id  checkBoxes  gt           lt input type  checkbox  class  checkBoxClass  id  Checkbox1    gt           lt br   gt           lt input type  checkbox  class  checkBoxClass  id  Checkbox2    gt           lt br   gt           lt input type  checkbox  class  checkBoxClass  id  Checkbox3    gt           lt br   gt           lt input type  checkbox  class  checkBoxClass  id  Checkbox4    gt           lt br   gt           lt input type  checkbox  class  checkBoxClass  id  Checkbox5    gt           lt br   gt       lt  p gt    When user checks ckbCheckAll all checkboxes must be checked  Also I have following jquery code         document  ready function                  ckbCheckAll   click function                      checkBoxClass   attr  checked   this checked                         When I see my page in the browser I get the following result  In the first click on ckbCheckAll all checkboxes were checked  which is correct   In the second click on ckbCheckAll all checkboxes were unchecked  which is correct   But in 3rd attempt nothing happened  also in 4th attempt nothing happened and so on   Where is the problem

User · Answer

Add jquery-2 1 0 min js file  lt script src  quot https   code jquery com jquery-2 1 0 min js quot  gt  lt  script gt   Write the codes given below   lt script gt    document  ready function                quot  checkAll quot   change function             var checked     this  is   checked       Get Checkbox state         if  this checked    If true then checked all checkboxes               quot  classofyourallcheckbox quot   prop  checked   true           else               quot  classofyourallcheckbox quot   prop  checked   false     or uncheck all textboxes                lt  script gt

User · Answer

Use prop   instead -     document  ready function                  ckbCheckAll   click function                      checkBoxClass   each function                    if   this  prop  checked   true                           this  prop  checked   false                     else                         this  prop  checked   true                                                                           BUT I like  dmk s much more compact answer and  1 d it

User · Answer

Let i have the following checkboxes    lt input type  checkbox  name  vehicle  value  select All  id  chk selall  gt Select ALL lt br gt           lt input type  checkbox  name  vehicle  value  Bike  id  chk byk  gt bike lt br gt           lt input type  checkbox  name  vehicle  value  Car  id  chk car  gt car           lt input type  checkbox  name  vehicle  value  Bike  id  chk bus  gt Bus lt br gt           lt input type  checkbox  name  vehicle  value  scooty  id  chk scooty  gt scooty    Here is the simple code to select all and diselect all when the selectall check box will click   lt script type  text javascript  gt            document  ready function                      chk selall   on  click   function                           chk byk   prop  checked   true                        chk car   prop  checked   true                        chk bus   prop  checked   true                        chk scooty   prop  checked   true                                      chk selall   on  click   function                       if     this  prop  checked                                              chk byk   prop  checked   false                           chk car   prop  checked   false                           chk bus   prop  checked   false                           chk scooty   prop  checked   false                                                                      lt  script gt

User · Answer

Here is a simple way to do this    Html     lt input type  checkbox  id  selectall  class  css-checkbox   name  selectall   gt Selectall lt br gt   lt input type  checkbox  class  checkboxall  value  checkbox1   gt checkbox1 lt br gt   lt input type  checkbox  class  checkboxall  value  checkbox2   gt checkbox2 lt br gt   lt input type  checkbox  class  checkboxall  value  checkbox3   gt checkbox3 lt br gt    jquery      document  ready function        selectall   click function            if this checked                   checkboxall   each function                        checkboxall   prop  checked   true                           else                  checkboxall   each function                        checkboxall   prop  checked   false

User · Answer

Use prop      checkBoxClass   prop  checked   true     or to uncheck       checkBoxClass   prop  checked   false     http   jsfiddle net sVQwA       ckbCheckAll   click function              checkBoxClass   prop  checked     this  prop  checked           Updated JSFiddle Link  http   jsfiddle net sVQwA 1

User · Answer

Try the following simple code      input type checkbox    each function     this checked   true         Source  How to reset all checkboxes using jQuery or pure JS

User · Answer

I have seen many answers to this question and found some answer is lengthy and some answer is a little bit wrong  I have created my own code by using the above IDs and class      ckbCheckAll   click function            if   this  prop  quot checked quot                     quot  checkBoxClass quot   prop  quot checked quot   true             else                  quot  checkBoxClass quot   prop  quot checked quot   false                                               checkBoxClass   click function            if    quot  checkBoxClass quot   length       quot  checkBoxClass checked quot   length                    quot  ckbCheckAll quot   prop  quot checked quot   true            else                  quot  ckbCheckAll quot   prop  quot checked quot   false                                  In the above code  where user clicks on select all checkbox and all checkbox will be selected and vice versa and second code will work when the user selects checkbox one by one then select all checkbox will be checked or unchecked according to a number of checkboxes checked

User · Answer

document  ready function              class   on  click   function                  checkbox  prop  checked   true

User · Answer

jQuery  function            add multiple select   deselect functionality         contact select all   click function               if     contact select all   is   checked                     noborder   prop  checked  true            else                 noborder   prop  checked  false                   if all checkbox are selected  check the selectall checkbox         noborder   click function         if     noborder   length        noborder checked   length                contact select all   attr  checked    checked          else               contact select all   removeAttr  checked

User · Answer

document  ready function             ckbCheckAll   click function                 checkBoxClass   each function                   this  attr  checked     this  attr  checked                               OR    function              ckbCheckAll   toggle          function                     checkBoxClass   prop  checked   true                      function                     checkBoxClass   prop  checked   false

User · Answer

document  ready function        ckbCheckAll   click function event                 if   this  is   checked                          checkBoxClass   each function                          this  prop  checked  true                                                 else                      checkBoxClass   each function                          this  prop  checked  false

User · Answer

I know its too late  but I m posting this for the upcoming developers    For select all checkbox we need to check three conditions  1  on click select all checkbox every checkbox should get selected 2  if all selected then on click select all checkbox  every checkbox should get deselected 3  if we deselect or select any of the checkbox the select all checkbox also should change   with these three things we ll get a good result for this you can approach this link https   qawall in 2020 05 30 select-all-or-deselect-all-checkbox-using-jquery  I got my solution from here  they have provided solution with examples    lt table gt   lt tr gt       lt th gt  lt input type  checkbox  id  select all   gt  Select all lt  th gt   lt  tr gt   lt tr gt       lt td gt  lt input type  checkbox  class  check  value  1   gt  Check 1 lt  td gt       lt td gt  lt input type  checkbox  class  check  value  2   gt  Check 2 lt  td gt       lt td gt  lt input type  checkbox  class  check  value  3   gt  Check 3 lt  td gt       lt td gt  lt input type  checkbox  class  check  value  4   gt  Check 4 lt  td gt       lt td gt  lt input type  checkbox  class  check  value  5   gt  Check 5 lt  td gt   lt  tr gt       lt script type  text javascript  gt    document  ready function        select all   on  click  function        if this checked               check   each function                this checked   true                   else               check   each function                this checked   false                             check   on  click  function        if     check checked   length        check   length               select all   prop  checked  true        else              select all   prop  checked  false                     hope this will help anyone

User · Answer

Try this    document  ready function              ckbCheckAll   click function                  checkBoxes input   prop  checked     this  prop  checked                   That should do it

User · Answer

Use below code                globalCheckbox   click function                if   this  prop  checked                          checkBox   prop  checked   true                 else                       checkBox   prop  checked   false                                                           checkBox   click function                if     checkBox   length        checkBox checked   length                        if the length is same then untick                      globalCheckbox   prop  checked   false                else                     vise versa                     globalCheckbox   prop  checked   true

User · Answer

checkall is the id of allcheck box and cb-child is the name of each checkboxes that will be checked and unchecked depend on checkall click event        checkall   click function                              if this checked                                  input name  cb-child     each function  i  el                                    el setAttribute  checked    checked                                    el checked   true                                  el parentElement className    checked                                                             else                                 input name  cb-child     each function  i  el                                    el removeAttribute  checked                                    el parentElement className

User · Answer

use this  if  this checked         checkBoxClass   attr  checked    checked    else        checkBoxClass   removeAttr  checked      also you can use prop please check http   api jquery com prop

[javascript] Select All checkboxes using jQuery

Examples related to javascript

Examples related to jquery