How to check all checkboxes using jQuery

Question

I am not expert with jQuery but I have tried to create a little script for my application  I want to check all checkboxes but it isn t working correctly   First I tried to use attr and after that I tried with prop but I m doing something wrong   I tried this first       checkAll   change function       if       input checkbox   is  checked               input checkbox   attr  checked   checked        else            input checkbox   removeAttr  checked                     But this didn t work   Next  This worked better than above code      checkAll   change function       if       input checkbox   is  checked               input checkbox   prop  checked  true       else            input checkbox   prop  checked   false                    Both examples don t work   JSFiddle  http   jsfiddle net hhZfu 4

User · Answer

function checkAll class name                class name  each function               if  this checked    true               this checked   false           else              this checked   true

User · Answer

Why don t you try this  in the 2nd line where  form   you need to put the proper selector of your html form        checkAll   click function           form myForm input checkbox   each function              this  prop  checked  true                                 uncheckAll   click function           form myForm input checkbox   each function              this  prop  checked  false                              Your html should be like this    lt form id  myForm  gt         lt span class  checkAll  gt checkAll lt  span gt         lt span class  uncheckAll  gt uncheckAll lt  span gt         lt input type  checkbox  class  checkSingle  gt  lt  input gt              lt  form gt    I hope that helps

User · Answer

A complete solution is here     document  ready function             checkedAll   change function             if  this checked                    checkSingle   each function                     this checked true                            else                   checkSingle   each function                     this checked false                                             checkSingle   click function              if    this  is   checked                  var isAllChecked   0                   checkSingle   each function                     if   this checked                      isAllChecked   1                               if  isAllChecked    0                        checkedAll   prop  checked   true                                        else                   checkedAll   prop  checked   false                           Html should be    Single check box on checked three checkbox will be select and deselect    lt input type  checkbox  name  checkedAll  id  checkedAll    gt    lt input type  checkbox  name  checkAll  class  checkSingle    gt   lt input type  checkbox  name  checkAll  class  checkSingle    gt   lt input type  checkbox  name  checkAll  class  checkSingle    gt    Hope this helps to someone as it did for me   JS Fiddle https   jsfiddle net 52uny55w

User · Answer

Simply use the checked property of the checkAll and use use prop   instead of attr for checked property  Live Demo       checkAll   click function                  input checkbox   prop  checked   this checked              Use prop   instead of attr   for properties like checked     As of jQuery 1 6  the  attr   method returns undefined for attributes   that have not been set  To retrieve and change DOM properties such as   the checked  selected  or disabled state of form elements  use the    prop   method   You have same id for checkboxes and its should be unique  You better use some class with the dependent checkboxes so that it does not include the checkboxes you do not want  As     input checkbox   will select all checkboxes on the page  If your page is extended with new checkboxes then they will also get selected un-selected  Which might not be the intended behaviour   Live Demo      checkAll   click function                  checkbox checkItem   prop  checked   this checked

User · Answer

use  prop   to get the value of a property      checkAll   change function             input checkbox   prop  checked     this  prop  checked

User · Answer

if isAllChecked    0             select all   prop  checked   true           please change the above line to   if isAllChecked    0             checkedAll   prop  checked   true           in SSR s answer and its working perfect Thank you

User · Answer

html         lt div class  col-md-3 general-sidebar  id  CategoryGrid  gt                                                       lt h5 gt Category  amp amp  Sub Category  lt span style  color  red   gt    lt  span gt  lt  h5 gt                                                       lt div class  checkbox  gt                                                           lt label gt                                                               lt input onclick  checkUncheckAll this   type  checkbox  gt                                                              All                                                          lt  label gt                                                       lt  div gt                                                   lt div class  checkbox  gt  lt label gt  lt input class  cat  type  checkbox  value  Quality  gt Quality lt  label gt  lt  div gt   lt div class  checkbox  gt  lt label gt  lt input class  subcat  type  checkbox  value  Planning process and execution  gt Planning process and execution lt  label gt  lt  div gt    javascript   function checkUncheckAll ele        if  ele checked                cat   prop  checked   ele checked               subcat   prop  checked   ele checked             else               cat   prop  checked   ele checked               subcat   prop  checked   ele checked

User · Answer

lt pre gt               lt SCRIPT language  javascript  gt                function                       add multiple select   deselect functionality                     selectall   click function                                case   attr  checked   this checked                                           if all checkbox are selected  check the selectall checkbox                    and viceversa                     case   click function                         if     case   length        case checked   length                                selectall   attr  checked    checked                          else                               selectall   removeAttr  checked                                                                            lt  SCRIPT gt               lt HTML gt               lt HEAD gt               lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt               lt TITLE gt Multiple Checkbox Select Deselect - DEMO lt  TITLE gt               lt  HEAD gt               lt BODY gt               lt H2 gt Multiple Checkbox Select Deselect - DEMO lt  H2 gt               lt table border  1  gt                 lt tr gt                   lt th gt  lt input type  checkbox  id  selectall   gt  lt  th gt                   lt th gt Cell phone lt  th gt                   lt th gt Rating lt  th gt                 lt  tr gt                 lt tr gt                   lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  1   gt  lt  td gt                   lt td gt BlackBerry Bold 9650 lt  td gt                   lt td gt 2 5 lt  td gt                 lt  tr gt                 lt tr gt                   lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  2   gt  lt  td gt                   lt td gt Samsung Galaxy lt  td gt                   lt td gt 3 5 5 lt  td gt                 lt  tr gt                 lt tr gt                   lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  3   gt  lt  td gt                   lt td gt Droid X lt  td gt                   lt td gt 4 5 5 lt  td gt                 lt  tr gt                 lt tr gt                   lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  4   gt  lt  td gt                   lt td gt HTC Desire lt  td gt                   lt td gt 3 5 lt  td gt                 lt  tr gt                 lt tr gt                   lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  5   gt  lt  td gt                   lt td gt Apple iPhone 4 lt  td gt                   lt td gt 5 5 lt  td gt                 lt  tr gt               lt  table gt               lt  BODY gt               lt  HTML gt               lt  pre gt

User · Answer

checkall   on  click  function              chk   trigger  click

User · Answer

HTML   lt HTML gt   lt HEAD gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt       lt TITLE gt Multiple Checkbox Select Deselect - DEMO lt  TITLE gt   lt  HEAD gt   lt BODY gt       lt H2 gt Multiple Checkbox Select Deselect - DEMO lt  H2 gt   lt table border  1  gt   lt tr gt       lt th gt  lt input type  checkbox  id  selectall   gt  lt  th gt       lt th gt Cell phone lt  th gt       lt th gt Rating lt  th gt   lt  tr gt   lt tr gt       lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  1   gt  lt  td gt       lt td gt BlackBerry Bold 9650 lt  td gt       lt td gt 2 5 lt  td gt   lt  tr gt   lt tr gt       lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  2   gt  lt  td gt       lt td gt Samsung Galaxy lt  td gt       lt td gt 3 5 5 lt  td gt   lt  tr gt   lt tr gt       lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  3   gt  lt  td gt       lt td gt Droid X lt  td gt       lt td gt 4 5 5 lt  td gt   lt  tr gt   lt tr gt       lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  4   gt  lt  td gt       lt td gt HTC Desire lt  td gt       lt td gt 3 5 lt  td gt   lt  tr gt   lt tr gt       lt td align  center  gt  lt input type  checkbox  class  case  name  case  value  5   gt  lt  td gt       lt td gt Apple iPhone 4 lt  td gt       lt td gt 5 5 lt  td gt   lt  tr gt   lt  table gt    lt  BODY gt   lt  HTML gt    jQuery Code   lt SCRIPT language  javascript  gt    function            add multiple select   deselect functionality         selectall   click function                    case   attr  checked   this checked                   if all checkbox are selected  check the selectall checkbox        and viceversa         case   click function             if     case   length        case checked   length                    selectall   attr  checked    checked              else                   selectall   removeAttr  checked                            lt  SCRIPT gt    View Demo  Click here to View Demo

User · Answer

You need to use  prop   to set the checked property      checkAll   click function           input checkbox   not this  prop  checked   this checked         Demo  Fiddle

User · Answer

I think when user select all checkbox manually then checkall should be checked automatically or user unchecked one of them from all selected checkbox then checkall should be unchecked automically  here is my code    x000D   x000D      checkall   change function      x000D          cb-element   prop  checked  this checked   x000D      x000D   x000D      cb-element   change function      x000D   if      cb-element checked   length        cb-element   length   x000D        checkall   prop  checked  true   x000D     x000D   else   x000D        checkall   prop  checked  false   x000D     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  name  all  id  checkall    gt Check All lt  br gt  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

Usually you also want the master checkbox to be unchecked if at least 1 slave checkbox is unchecked and to be ckecked if all slave checkboxes are checked          Checks and unchecks checkbox-group with a master checkbox and slave checkboxes     param masterId is the id of master checkbox     param slaveName is the name of slave checkboxes     function checkAll masterId  slaveName         master           masterId        slave      input checkbox name     slaveName               master click function             slave prop  checked     this  prop  checked              slave trigger  change                  slave change function             if   master is   checked    amp  amp   slave not   checked   length  gt  0                 master prop  checked   false             else if   master not   checked    amp  amp   slave not   checked   length    0             master prop  checked    checked                        And if you want to enable any control  e g  Remove All button or a Add Something button   when at least one checkbox is checked and disable when no checkbox is checked          Checks and unchecks checkbox-group with a master checkbox and slave checkboxes     enables or disables a control when a checkbox is checked     param masterId is the id of master checkbox     param slaveName is the name of slave checkboxes     function checkAllAndSwitchControl masterId  slaveName  controlId         master           masterId        slave      input checkbox name     slaveName               master click function             slave prop  checked     this  prop  checked              slave trigger  change                  slave change function             switchControl controlId   slave filter   checked   length  gt  0           if   master is   checked    amp  amp   slave not   checked   length  gt  0                 master prop  checked   false             else if   master not   checked    amp  amp   slave not   checked   length    0             master prop  checked    checked                            Enables or disables a control     param controlId is the control-id     param enable is true  if control must be enabled  or false if not     function switchControl controlId  enable        var  control           controlId       if  enable             control removeProp  disabled          else            control prop  disabled    disabled

User · Answer

JAVA SCRIPT TO SELECT ALL CHECK BOX    Best Solution   Try it   lt script type  text javascript  gt          function SelectAll Id                  get reference of GridView control             var Grid   document getElementById   lt    GridView1 ClientID   gt                   variable to contain the cell of the Grid             var cell               if  Grid rows length  gt  0                      loop starts from 1  rows 0  points to the header                  for  i   1  i  lt  grid rows length  i                            get the reference of first column                     cell   grid rows i  cells 0                          loop according to the number of childNodes in the cell                     for  j   0  j  lt  cell childNodes length  j                                if childNode type is CheckBox                                          if  cell childNodes j  type     checkbox                                   Assign the Status of the Select All checkbox to the cell checkbox within the Grid                             cell childNodes j  checked   document getElementById Id  checked                                                                                                 lt  script gt

User · Answer

function chek al indi id        var k   id      var cnt descriptiv indictr   eval     cnt descriptiv indictr   val         var std cnt   10       if         k  is   checked                  for  var i   1  i  lt   std cnt  i                                chk   k  attr  checked  true                 k   k   cnt descriptiv indictr                       if         k  is   not  checked                   for  var i   1  i  lt   std cnt  i                                chk   k  attr  checked  false                    k   k   cnt descriptiv indictr

User · Answer

Trigger Click      checkAll   click function           input checkbox   click          OR      checkAll   click function           input checkbox   trigger  click          OR      checkAll   click function           input checkbox   prop  checked   this checked

User · Answer

You Can use below Simple Code   function checkDelBoxes pForm  boxName  parent        for  i   0  i  lt  pForm elements length  i            if  pForm elements i  name    boxName              pForm elements i  checked   parent      Example for Using    lt a href  javascript    onclick  javascript checkDelBoxes   this  closest  form   get 0    CheckBox     true  return false   gt  Select All  lt  a gt   lt a href  javascript    onclick  javascript checkDelBoxes   this  closest  form   get 0    CheckBox     false  return false   gt  Unselect All  lt  a gt

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

i know there are lot of answer posted here but i would like to post this for optimization of code and we can use it globally   i tried my best    ----------------------------------------     Check and uncheck checkbox which will global     Params   chk all id id of main checkbox which use for check all dependant  chk child pattern start pattern of the remain checkboxes      Developer Guidline   For to implement this function Developer need to just add this line inside checkbox    class  check all  dependant-prefix-id  PATTERN WHATEVER U WANT      ----------------------------------------   function checkUncheckAll chk all cls chiled patter key       if       chk all cls  prop  checked      true              input checkbox id     chiled patter key       prop  checked    checked         else             input checkbox id     chiled patter key       removeProp  checked    checked                     if     check all   get 0        var chiled patter key       check all   attr  dependant-prefix-id             check all   on  change  function                    checkUncheckAll  check all  chiled patter key                  ------------------------------------------------------        this will remain checkbox checked if already checked before ajax call          ------------------------------------------------------         document  ajaxComplete function             checkUncheckAll  check all  chiled patter key               I hope this will help

User · Answer

lt p id  checkAll  gt Check All lt  p gt   lt hr   gt   lt input type  checkbox  class  checkItem  gt Item 1  lt input type  checkbox  class  checkItem  gt Item 2  lt input type  checkbox  class  checkItem  gt Item3   And jquery    document  on  click    checkAll  function               checkItem   not this  prop  checked   this checked

User · Answer

One checkbox to rule them all   For people still looking for plugin to control checkboxes through one that s lightweight  has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked  and gets checked when all controlled checkboxes are checked of course  I ve created a jQuery checkAll plugin   Feel free to check the examples on documentation page     For this question example all you need to do is        checkAll    checkall       target   input checkbox        Isn t that clear and simple

User · Answer

You can run  prop   on the results of a jQuery Selector directly even if it returns more than one result  So      input type  checkbox     prop  checked   true

User · Answer

x000D   x000D    document  ready function           parent   click function             child   prop  checked   this checked                child   click function         if      child checked   length        child   length              parent   prop  checked   true         else             parent   prop  checked   false                   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt   lt p gt  lt input type  checkbox  id  parent    gt  Check Uncheck All lt  p gt   lt ul gt     lt li gt       lt input type  checkbox  class  child    gt  Checkbox 1 lt  li gt     lt li gt       lt input type  checkbox  class  child    gt  Checkbox 2 lt  li gt     lt li gt       lt input type  checkbox  class  child    gt  Checkbox 3 lt  li gt   lt  ul gt  x000D   x000D   x000D   HTML   lt p gt  lt input type  quot checkbox quot  id  quot parent quot    gt  Check Uncheck All lt  p gt   lt ul gt     lt li gt       lt input type  quot checkbox quot  class  quot child quot    gt  Checkbox 1 lt  li gt     lt li gt       lt input type  quot checkbox quot  class  quot child quot    gt  Checkbox 2 lt  li gt     lt li gt       lt input type  quot checkbox quot  class  quot child quot    gt  Checkbox 3 lt  li gt   lt  ul gt   jQuery    document  ready function          quot  parent quot   click function            quot  child quot   prop  quot checked quot   this checked                child   click function         if      child checked   length        child   length              parent   prop  checked   true         else             parent   prop  checked   false

User · Answer

checkAll   on  change   function        if   this  attr  checked                input type checkbox    attr  checked  true             else             input type checkbox    removeAttr  checked

User · Answer

if     chk all   is   checked                 id  attr  checked   true      else              id  attr  checked   false

User · Answer

Simplest way I know      input type  checkbox     prop  checked   true

[javascript] How to check all checkboxes using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to checkbox