How do I check uncheck all checkboxes with a button using jQuery

Question

I am trying to check uncheck all checkboxes using jQuery  Now by checking unchecking the parent checkbox all the child checkboxes are getting selected deselected also with the text of parent checkbox getting changed to checkall uncheckall    Now I want to replace parent checkbox with an input button  and change the text also on the button to checkall uncheckall  THere is the code  can anyone please tweak the code           function                  checkAll    live   change   function                      cb-element    attr   checked      this   is    checked       checked                         this   next   text     this   is    checked       Uncheck All     Check All                              cb-element    live   change   function                      cb-element    length         cb-element checked    length        checkAll    attr   checked    checked    next   text   Uncheck All           checkAll    attr   checked        next   text   Check All                                lt input type  checkbox  class  checkAll    gt   lt b gt Check All lt  b gt       lt input type  checkbox  class  cb-element    gt  Checkbox  1     lt input type  checkbox  class  cb-element    gt  Checkbox  2     lt input type  checkbox  class  cb-element    gt  Checkbox  3

User · Answer

Try below code to check uncheck all checkboxes   x000D   x000D  jQuery document  ready function     x000D          check uncheck   change function     x000D          if      check uncheck checked   length    x000D                  checkboxes input checkbox   prop  checked   true   x000D            else   x000D                  checkboxes input checkbox   prop  checked   false   x000D            x000D         x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  name  check uncheck  id  check uncheck    gt  Check All Uncheck All x000D   lt br  gt  x000D   lt br  gt  x000D   lt div class  checkboxes  gt  x000D       lt input type  checkbox  name  check  id  check    gt  Check Box 1 x000D       lt br  gt  x000D       lt input type  checkbox  name  check  id  check    gt  Check Box 2 x000D       lt br  gt  x000D       lt input type  checkbox  name  check  id  check    gt  Check Box 3 x000D       lt br  gt  x000D       lt input type  checkbox  name  check  id  check    gt  Check Box 4 x000D   lt  div gt  x000D   x000D   x000D    Try this Demo Link  There is also another short way to do this  checkout below example  In this example check uncheck all checkbox is checked or not if checked then all wiil be checked and if not all will be uncheck   x000D   x000D      check uncheck   change function     x000D          checkboxes input checkbox   prop  checked    this  is   checked     x000D     x000D       lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D       lt input type  checkbox  name  check uncheck  id  check uncheck    gt  Check All Uncheck All x000D       lt br  gt  x000D       lt br  gt  x000D       lt div class  checkboxes  gt  x000D           lt input type  checkbox  name  check  id  check    gt  Check Box 1 x000D           lt br  gt  x000D           lt input type  checkbox  name  check  id  check    gt  Check Box 2 x000D           lt br  gt  x000D           lt input type  checkbox  name  check  id  check    gt  Check Box 3 x000D           lt br  gt  x000D           lt input type  checkbox  name  check  id  check    gt  Check Box 4 x000D       lt  div gt  x000D   x000D   x000D

User · Answer

This is the shortest way I ve found  needs jQuery1 6    HTML    lt input type  checkbox  id  checkAll   gt    JS       checkAll   change function             input checkbox   prop  checked     this  prop  checked           I m using  prop as  attr doesn t work for checkboxes in jQuery 1 6  unless you ve explicitly added a checked attribute to your input tag   Example-   x000D   x000D      checkAll   change function      x000D         input checkbox   prop  checked     this  prop  checked     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt form action     gt  x000D       lt p gt  lt label gt  lt input type  checkbox  id  checkAll   gt  Check all lt  label gt  lt  p gt  x000D       x000D       lt fieldset gt  x000D           lt legend gt Loads of checkboxes lt  legend gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 1 lt  label gt  lt  p gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 2 lt  label gt  lt  p gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 3 lt  label gt  lt  p gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 4 lt  label gt  lt  p gt  x000D       lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

You can try this          checkAll   on  click  function                checkboxes   prop  checked    this  prop  checked                Class  checkAll is a checkbox which controls the bulk action

User · Answer

Shameless self-promotion  there s a jQuery plugin for that   HTML    lt form action     id  myform  gt       lt div gt  lt input type  checkbox  id  checkall  gt   lt label for  checkall  gt  Check all lt  label gt  lt  div gt       lt fieldset id  slaves  gt           lt div gt  lt label gt  lt input type  checkbox  gt  Checkbox lt  label gt  lt  div gt           lt div gt  lt label gt  lt input type  checkbox  gt  Checkbox lt  label gt  lt  div gt           lt div gt  lt label gt  lt input type  checkbox  gt  Checkbox lt  label gt  lt  div gt           lt div gt  lt label gt  lt input type  checkbox  gt  Checkbox lt  label gt  lt  div gt           lt div gt  lt label gt  lt input type  checkbox  gt  Checkbox lt  label gt  lt  div gt       lt  fieldset gt   lt  form gt     JS       checkall   checkAll   slaves input checkbox         reportTo  function              var prefix   this prop  checked      un                this next   text prefix    check all                    and you re done   http   jsfiddle net mattball NrM2P

User · Answer

Solution for toggling checkboxes using a button  compatible with jQuery 1 9  where toogle-event is no longer available       check button   click function          var checked      this  data  checked             input checkbox   prop  checked   checked           this  val checked    uncheck all     check all            this  data  checked   checked         DEMO

User · Answer

Try This One   HTML   lt input type  checkbox  name  all  id  checkall    gt    JavaScript      checkall checkbox   change function         if   this  attr  checked       input checkbox   attr  checked   checked       else    input checkbox   removeAttr  checked           DEMO

User · Answer

document  ready  function                Check All             checkall   click function                                checkbox   attr  checked   true                          Uncheck All             uncheckall   click function                                  checkbox   attr  checked   false

User · Answer

Check   Uncheck All with Intermediate property using jQuery  Get Checked Items in Array using getSelectedItems   method  Source Checkbox List Select   Unselect All with Indeterminate Master Check     HTML   lt div class  container  gt     lt div class  card  gt       lt div class  card-header  gt         lt ul class  list-group list-group-flush  gt           lt li class  list-group-item  gt             lt input             class  form-check-input              type  checkbox              value  selectAll              id  masterCheck              gt             lt label class  form-check-label  for  masterCheck  gt              Select   Unselect All            lt  label gt           lt  li gt         lt  ul gt       lt  div gt       lt div class  card-body  gt         lt ul class  list-group list-group-flush  id  list-wrapper  gt           lt li class  list-group-item  gt             lt input             class  form-check-input              type  checkbox              value  item1              id  item1              gt             lt label class  form-check-label  for  item1  gt              Item 1            lt  label gt           lt  li gt           lt li class  list-group-item  gt             lt input             class  form-check-input              type  checkbox              value  item2              id  item2              gt             lt label class  form-check-label  for  item2  gt              Item 2            lt  label gt           lt  li gt           lt li class  list-group-item  gt             lt input             class  form-check-input              type  checkbox              value  item3              id  item3              gt             lt label class  form-check-label  for  item3  gt              Item 3            lt  label gt           lt  li gt           lt li class  list-group-item  gt             lt input             class  form-check-input              type  checkbox              value  item4              id  item4              gt             lt label class  form-check-label  for  item4  gt              Item 4            lt  label gt           lt  li gt           lt li class  list-group-item  gt             lt input             class  form-check-input              type  checkbox              value  item5              id  item5              gt             lt label class  form-check-label  for  item5  gt              Item 5            lt  label gt           lt  li gt           lt li class  list-group-item  id  selected-values  gt  lt  li gt         lt  ul gt       lt  div gt     lt  div gt   lt  div gt    jQuery      function            ID selector on Master Checkbox     var masterCheck       masterCheck           ID selector on Items Container     var listCheckItems       list-wrapper  checkbox            Click Event on Master Check     masterCheck on  click   function           var isMasterChecked     this  is   checked          listCheckItems prop  checked   isMasterChecked         getSelectedItems                    Change Event on each item checkbox     listCheckItems on  change   function              Total Checkboxes in list       var totalItems   listCheckItems length           Total Checked Checkboxes in list       var checkedItems   listCheckItems filter   checked   length           If all are checked       if  totalItems    checkedItems            masterCheck prop  indeterminate   false           masterCheck prop  checked   true                    Not all but only some are checked       else if  checkedItems  gt  0  amp  amp  checkedItems  lt  totalItems            masterCheck prop  indeterminate   true                   If none is checked       else           masterCheck prop  indeterminate   false           masterCheck prop  checked   false                 getSelectedItems                 function getSelectedItems           var getCheckedValues             getCheckedValues             listCheckItems filter   checked   each function             getCheckedValues push   this  val                         selected-values   html JSON stringify getCheckedValues

User · Answer

Here is a link  which is used to check and uncheck the parent checkbox and all the child checkboxes are getting selected and deselected   jquery check uncheck all checkboxes Using Jquery With Demo    function                  select-all   on  click   function                  var all     this                  input checkbox   each function                        this  prop  checked   all prop  checked

User · Answer

Best Solution here Check Fiddle      checkAll   change function             input checkbox cb-element   prop  checked     this  prop  checked             cb-element   change function               tot       cb-element   length                                  tot checked       cb-element checked   length           if  tot     tot checked                   checkAll   prop  checked  false                    lt input type  checkbox  id  checkAll   gt  ALL   lt br   gt    lt input type  checkbox  class  cb-element    gt  Checkbox  1  lt input type  checkbox  class  cb-element    gt  Checkbox  2  lt input type  checkbox  class  cb-element    gt  Checkbox  3

User · Answer

function             input check all   change function                 input name  input ids       prop  checked     this  prop  checked

User · Answer

If you want to uncheck all the checkboxes on a page  the easiest way is like this   x000D   x000D      type checkbox    prop  checked   false   x000D   x000D   x000D

User · Answer

Agreed with Richard Garside s short answer  but instead of using prop   in   this  prop  checked   you can use native JS checked property of checkbox like     x000D   x000D      checkAll   change function      x000D         input checkbox   prop  checked   this checked   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt form action     gt  x000D       lt p gt  lt label gt  lt input type  checkbox  id  checkAll   gt  Check all lt  label gt  lt  p gt  x000D       x000D       lt fieldset gt  x000D           lt legend gt Loads of checkboxes lt  legend gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 1 lt  label gt  lt  p gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 2 lt  label gt  lt  p gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 3 lt  label gt  lt  p gt  x000D           lt p gt  lt label gt  lt input type  checkbox    gt  Option 4 lt  label gt  lt  p gt  x000D       lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

try this       checkAll   click function         if  checkall        this  val                   cb-element   attr  checked   true              this  val  uncheckall      change button text           else if  uncheckall        this  val                   cb-element   attr  checked   false              this  val  checkall      change button text

User · Answer

Try this       checkAll   on  click   function e             cb-element   prop  checked     e target  prop  checked           e is the event generated when you do click   and e target is the element clicked   checkAll   so you only have to put the property checked of elements with class  cb-element like that of element with class  checkAll    PS  Excuse my bad English

User · Answer

I know this question is old but  I noticed most people are using a checkbox  The accepted answer uses a button  but cannot work with several buttons  ex  one at top of page one at bottom   So here is a modification that does both   HTML   lt a href     class  check-box-machine my-button-style  gt Check All lt  a gt    jQuery  var ischecked   false      check-box-machine   click function e        e preventDefault        if  ischecked    false               input checkbox   attr  checked   checked                check-box-machine   html  Uncheck All            ischecked   true        else              input checkbox   removeAttr  checked                check-box-machine   html  Check All            ischecked   false              This will allow you to have as many buttons as you would like with changing text and checkbox values  I included an e preventDefault   call because this will stop the page from jumping to the top due to the href     part

User · Answer

Try this one      document  ready function            check button   toggle function               input checkbox   attr  checked   checked              this  val  uncheck all          function               input checkbox   removeAttr  checked              this  val  check all                        DEMO

User · Answer

Check All with uncheck check controller if all items is isnt checked  JS      e   checkbox id t  checkbox  item  class n  checkbox check all class   function checkAll e t n  jQuery     e  click function e  if this checked  jQuery     t  each function   this checked true jQuery     n  each function   this checked true     else jQuery     t  each function   this checked false jQuery     n  each function   this checked false        jQuery     t  click function e  var r jQuery     t  length var i 0 var s 0 jQuery     t  each function   if this checked  true  i   if this checked  false  s      if r  i  jQuery     n  each function   this checked true   if i lt r  jQuery     n  each function   this checked false         HTML      Check ALL controle class   chkall ctrl    lt input type  checkbox name  chkall  id  chkall up  class  chkall ctrl   gt   lt br  gt  1  lt input type  checkbox  value  1  class  chkall  name  chk    id  chk1   gt  lt br  gt  2  lt input type  checkbox  value  2  class  chkall  name  chk    id  chk2   gt  lt br  gt  3  lt input type  checkbox  value  3  class  chkall  name  chk    id  chk3   gt  lt br  gt   lt br  gt   lt input type  checkbox name  chkall  id  chkall down  class  chkall ctrl   gt    lt script gt  jQuery document  ready function        checkAll  chkall up   chkall   chkall ctrl      checkAll  chkall down   chkall   chkall ctrl          lt  script gt

User · Answer

try this    lt input type  checkbox  class  checkAll  onclick     input type checkbox  class cb-element    attr  checked  this checked   gt

User · Answer

add this in your code block  or even click of your button     input checkbox   attr  checked  false

User · Answer

Html   lt input type  checkbox  name  select all  id  select all  class  checkAll    gt    Javascript          checkAll   click function        if   this  attr  checked                input checkbox   attr  checked  true             else             input checkbox   attr  checked  false

User · Answer

Below code will work if user select all checkboxs then check all-checkbox will be checked and if user unselect any one checkbox then check all-checkbox will be unchecked    x000D   x000D      checkall   change function      x000D         input checkbox   prop  checked     this  prop  checked     x000D      x000D   x000D      cb-element   change function      x000D    if     cb-element   length      cb-element checked   length  x000D          checkall   prop  checked   true   x000D    else x000D          checkall   prop  checked   false   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  name  all  id  checkall    gt Check All lt  br gt  x000D   x000D   lt input type  checkbox  class  cb-element    gt  Checkbox  1 lt  br gt  x000D   lt input type  checkbox  class  cb-element    gt  Checkbox  2 lt  br gt  x000D   lt input type  checkbox  class  cb-element    gt  Checkbox  3 x000D   x000D   x000D

User · Answer

You can use this checked to verify the current state of the checkbox       checkAll   change function        var state   this checked    checked   - true else false      state       checkbox   prop  checked  true        checkbox   prop  checked  false          change text     state     this  next  b   text  Uncheck All       this  next  b   text  Check All          x000D   x000D      checkAll   change function    x000D      var state   this checked  x000D      state      checkbox   prop  checked  true      checkbox   prop  checked  false   x000D      state    this  next  b   text  Uncheck All      this  next  b   text  Check All   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D    lt input type  checkbox  class  checkAll    gt   lt b gt Check All lt  b gt  x000D   x000D      lt input type  checkbox  class  cb-element    gt  Checkbox  1 x000D      lt input type  checkbox  class  cb-element    gt  Checkbox  2 x000D      lt input type  checkbox  class  cb-element    gt  Checkbox  3 x000D   x000D   x000D

User · Answer

document  on  change     check-all   function         if   this  prop  checked                check-box   prop  checked   true      else             check-box   prop  checked   false

User · Answer

lt script type  text javascript  gt      function myFunction checked total boxes             for   i 0   i  lt  total boxes   i                  if  checked                   document forms 0  checkBox i  checked true                else                 document forms 0  checkBox i  checked false                                       lt  script gt       lt body gt           lt FORM gt                lt input type  checkbox  name  checkBox   gt one lt br gt                lt input type  checkbox  name  checkBox   gt two lt br gt                lt input type  checkbox  name  checkBox   gt three lt br gt                lt input type  checkbox  name  checkBox   gt four lt br gt                lt input type  checkbox  name  checkBox   gt five lt br gt                lt input type  checkbox  name  checkBox   gt six lt br gt                lt input type  checkbox  name  checkBox   gt seven lt br gt                lt input type  checkbox  name  checkBox   gt eight lt br gt                lt input type  checkbox  name  checkBox   gt nine lt br gt               lt input type  checkbox  name  checkBox   gt ten lt br gt   s              lt input type button name  CheckAll  value  Select All  onClick  myFunction true 10   gt                lt input type button name  UnCheckAll  value  UnCheck All Boxes  onClick  myFunction false 10   gt            lt  FORM gt        lt  body gt

[jquery] How do I check/uncheck all checkboxes with a button using jQuery?

Examples related to jquery

Examples related to checkbox