How do I check whether a checkbox is checked in jQuery

Question

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery  For example  if the age checkbox is checked  then I need to show a textbox to enter age  else hide the textbox  But the following code returns false by default   x000D   x000D  if      isAgeSelected   attr  checked            txtAge   show      else         txtAge   hide      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt input type  checkbox  id  isAgeSelected   gt   lt div id  txtAge  style  display none  gt    Age is selected  lt  div gt  x000D   x000D   x000D   How do I successfully query the checked property

User · Answer

isAgeSelected   prop  checked   true

User · Answer

Hi you can use plain Javascript  like so    x000D   x000D  document getElementById  checkboxOption   addEventListener  click         x000D     event   gt  console log event target checked  x000D     x000D   lt label gt  lt input type  checkbox  id  checkboxOption  gt Check Option lt  label gt  x000D   x000D   x000D

User · Answer

I am using this     lt input type  checkbox  id  isAgeSelected  value  1    gt   lt br  gt    lt input type  textbox  id  txtAge    gt        isAgeSelected   is   checked         txtAge   show         txtAge   hide

User · Answer

In pure js checkbox state is easier to read  isAgeSelected checked    x000D   x000D  function check     x000D    txtAge style display  isAgeSelected checked    block   none   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D  Age  lt input type  checkbox  id  isAgeSelected   gt  x000D   x000D   lt button onclick  check    gt Check lt  button gt  x000D   x000D   lt div id  txtAge  style  display none  gt  x000D  Age is selected x000D   lt  div gt  x000D   x000D   x000D

User · Answer

1  If your HTML markup is    lt input type  checkbox     gt    attr used     element  attr  checked       Will give you undefined as initial value of checkbox is not set   If prop is used     element  prop  checked       Will give you false whether or not initial value is set   2  If your HTML markup is     lt input type  checkbox   checked  checked    gt    May be like this also  checked  true    attr used     element  attr  checked      Will return checked whether it is checked  true    Prop used     element  prop  checked      Will return true whether checked  checked

User · Answer

Include jQuery from the local file system  I used Google s CDN  and there are also many CDNs to choose from    lt script src    ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt    The code will execute as soon as a checkbox inside mycheck class is clicked  If the current clicked checkbox is checked then it will disable all others and enable the current one  If the current one is unchecked  it will again enable all checkboxes for rechecking    lt script type  text javascript  gt        document  ready function              var checkbox selector     mycheck input type checkbox               checkbox selector  click function                 if      this   is   checked                          Disable all checkboxes                   checkbox selector  attr  disabled    disabled                        Enable current one                     this   removeAttr  disabled                              else                      If unchecked open all checkbox                   checkbox selector  removeAttr  disabled                                       lt  script gt    Simple form to test   lt form method  post  action    gt       lt div class  mycheck  gt           lt input type  checkbox  value  1    gt  Television          lt input type  checkbox  value  2    gt  Computer          lt input type  checkbox  value  3    gt  Laptop          lt input type  checkbox  value  4    gt  Camera          lt input type  checkbox  value  5    gt  Music Systems      lt  div gt   lt  form gt    Output screen

User · Answer

I would actually prefere the change event       isAgeSelected   change function             txtAge   toggle this checked         Demo Fiddle

User · Answer

Using jQuery   1 6    lt input type  checkbox  value  1  name  checkMeOut  id  checkMeOut  checked  checked    gt      traditional attr     checkMeOut   attr  checked        checked     new property method     checkMeOut   prop  checked       true   Using the new property method   if     checkMeOut   prop  checked             something when checked   else          something else when not

User · Answer

Here s an example that includes initialising the show hide to match the state of the checkbox when the page loads  taking account of the fact that firefox remembers the state of checkboxes when you refresh the page  but won t remember the state of the shown hidden elements     function            initialise visibility when page is loaded        tr invoiceItemRow   toggle     showInvoiceItems   attr  checked            attach click handler to checkbox         showInvoiceItems   click function       tr invoiceItemRow   toggle this checked            with help from other answers on this question

User · Answer

There are many ways to check if a checkbox is checked or not   Way to check using jQuery  if  elem checked  if    elem  prop  checked    if    elem  is   checked    if    elem  attr  checked      Check example or also document    http   api jquery com attr  http   api jquery com prop

User · Answer

Toggle  0 1 or else   lt input type  checkbox  id  nolunch    gt   lt input id  checklunch   gt            nolunch   change function          if    this  is   checked                  checklunch   val  1               if    this  is   checked      false                checklunch   val  0

User · Answer

Use    lt input type  checkbox  id  abc  value  UDB  gt UDB  lt input type  checkbox  id  abc  value  Prasad  gt Prasad        input abc   click function      if   this  is   checked            var checkedOne   this  val       alert checkedOne           Do some other action          This can help if you want that the required action has to be done only when you check the box not at the time you remove the check

User · Answer

I verified in Firefox 9 0 1 that the following works for catching the state of a checkbox post change       mycheckbox   change function         var value     this  prop  checked      true     false                            alert value

User · Answer

Please try below code to check checkbox is checked or not     document  ready function             isAgeSelected   on  change  function         if     isAgeSelected   is   checked                txtAge   show        checked     else              txtAge   hide        unchecked

User · Answer

Use jQuery s is   function   if     isAgeSelected   is   checked            txtAge   show        checked else         txtAge   hide        unchecked

User · Answer

if     isAgeSelected   prop  checked             do your action

User · Answer

Try this        isAgeSelected   click function         if this checked               txtAge   show          else              txtAge   hide

User · Answer

In case if you need to use CSS class as jQuery selector you can do following     document  ready function                  myOptionCheckbox   change function                              if    this  prop  checked      true                    console log  checked                                         else                   console log  unchecked                                                        It works fine for checkboxes and radioboxes as well

User · Answer

You can use     if document getElementById  isAgeSelected   checked          txtAge   show        else         txtAge   hide        if     isAgeSelected   is   checked          txtAge   show      else       txtAge   hide      Both of them should work

User · Answer

This code will help you      isAgeSelected   click function       console log this checked      if this checked    true                txtAge   show          else              txtAge   hide

User · Answer

I m using jQuery 1 11 1 and I had troubles with setting and reading checkbox value as well   I finally solved it by these two functions   function setCheckboxValue checkBoxId  checked        if  checkBoxId  amp  amp   checked     true    checked     false             var elem           checkBoxId           if  checked     true                elem attr  checked    checked              else               elem removeAttr  checked                       function isChecked checkBoxId        return         checkBoxId  attr  checked      null      It might looks a little bit dirty but it solves all the wired issue I had among different types of browsers

User · Answer

I am using this and this is working absolutely fine       checkkBoxId   attr  checked     alert  Checked     alert  Unchecked      Note  If the checkbox is checked it will return true otherwise undefined  so better check for the  TRUE  value

User · Answer

Using the Click event handler for the checkbox property is unreliable  as the checked property can change during the execution of the event handler itself   Ideally  you d want to put your code into a change event handler such as it is fired every time the value of the check box is changed  independent of how it s done so        isAgeSelected   bind  change   function          if    this  is   checked             txtAge   show       else          txtAge   hide

User · Answer

This works for me      isAgeSelected being id for checkbox         isAgeSelected   click function        this  is   checked         txtAge   show         txtAge   hide

User · Answer

x000D   x000D    document  on  click    isAgeSelected  function    x000D    if   this  prop  checked      true   x000D          txtAge   show    x000D      x000D    else if   this  prop  checked      false   x000D          txtAge   hide    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D    lt input type  checkbox  id  isAgeSelected   gt  x000D   x000D   lt div id  txtAge  style  display none  gt  x000D   lt input type  text  name  age  placeholder  Please enter age    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery    E X -   1  Run On load to get checkbox value if the age checkbox is checked  then I need to show a text box to enter age  else hide the text box    2  if the age checkbox is checked  then I need to show a text box to enter age  else hide the text box using click event of checkbox    so code not returns false by default    Try the following    lt html gt           lt head gt               lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt           lt  head gt           lt body gt               lt h1 gt Jquery Demo lt  h1 gt               lt input type  checkbox  name  isAge  checked id  isAge  gt  isAge  lt br  gt               lt div id  Age  style  display none  gt                 lt label gt Enter your age lt  label gt                 lt input type  number  name  age  gt               lt  div gt               lt script type  text javascript  gt              if document getElementById  isAge   checked                        Age   show                  else                       Age   hide                                     isAge   click function                     if document getElementById  isAge   checked                            Age   show                      else                           Age   hide                                                    lt  script gt           lt  body gt       lt  html gt    Here is a modified version   https   jsfiddle net sedhal 0hygLtrz 7

User · Answer

A selector returns multiple objects  and it must take the first item in the array      Collection var chckremember       chckremember         Result boolen var ischecked chckremember 0  checked

User · Answer

If you are using an updated version of jquery  you must go for  prop method to resolve your issue       isAgeSelected   prop  checked   will return true if checked and false if unchecked  I confirmed it and I came across this issue earlier      isAgeSelected   attr  checked   and     isAgeSelected   is  checked   is returning undefined which is not a worthy answer for the situation  So do as given below   if     isAgeSelected   prop  checked              txtAge   show      else           txtAge   hide        Hope it helps   - Thanks

User · Answer

Use    lt input type  checkbox  name  planned checked  checked id  planned checked  gt  Planned      planned checked   change function         if   this  prop  checked              alert  Checked Box Selected          else           alert  Checked Box deselect                 x000D   x000D          planned checked   change function     x000D          if   this  prop  checked      x000D              alert  Checked Box Selected    x000D            else   x000D              alert  Checked Box deselect    x000D            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  planned checked  checked id  planned checked  gt  Planned x000D   x000D   x000D

User · Answer

In case you need to know if a checkbox is checked in pure javascript you should use this code      let checkbox  document getElementById  myCheckboxId    if checkbox checked        alert  element is checked      else       alert  element is  ot checked

User · Answer

You Can Try This code        isAgeSelected   click function       console log this checked      if this checked    true                txtAge   show          else              txtAge   hide

User · Answer

I decided to post an answer on how to do that exact same thing without jQuery  Just because I m a rebel   var ageCheckbox   document getElementById  isAgeSelected    var ageInput   document getElementById  txtAge        Just because of IE  lt 333 ageCheckbox onchange   function            Check if the checkbox is checked  and show hide the text field      ageInput hidden   this checked   false   true       First you get both elements by their ID  Then you assign the checkboxe s onchange event a function that checks whether the checkbox got checked and sets the hidden property of the age text field appropriately  In that example using the ternary operator   Here is a fiddle for you to test it   Addendum  If cross-browser compatibility is an issue then I propose to set the CSS display property to none and inline   elem style display   this checked    inline     none     Slower but cross-browser compatible

User · Answer

Setter       chkmyElement   0  checked   true    Getter   if     chkmyElement   0  checked       alert  enabled      else      alert  disabled

User · Answer

I believe you could do this   if      isAgeSelected  checked   size    gt  0            txtAge   show       else            txtAge   hide

User · Answer

document  ready function                 agecheckbox   click function             if   this  is   checked                              agetextbox   show              else                   agetextbox   hide

User · Answer

This function is alternative and stable       isAgeSelected   context checked  return True False    Example    if     isAgeSelected   context checked     if Checkbox is checked then bla bla                  else

User · Answer

The top answer didn t do it for me  This did though    lt script type  text javascript  gt        document  ready function                 li 13   click function                if     agree   attr  checked                         saveForm   fadeIn                              else                                   saveForm   fadeOut                                       lt  script gt    Basically when the element  li 13 is clicked  it checks if the element   agree  which is the checkbox  is checked by using the  attr  checked   function  If it is then fadeIn the  saveForm element  and if not fadeOut the saveForm element

User · Answer

The checked attribute of an input type  checkbox  is mapped with the defaultChecked property  not with the checked property    So when doing something in a page when a checkbox is checked on uncheked  use the prop   method instead  It fetches the property value and changes as the state of the checkbox changes    Using attr   or getAttribute in pure JavaScript  in these cases are not the proper way of doing things    if elem is the concerned checkbox then do something like this to fetch the value   elem checked   or    elem  prop  checked

User · Answer

My way of doing this is   if       checkbox checked   length                alert  checkbox is checked      else       alert  checkbox is not checked

User · Answer

jQuery 1 6       isAgeSelected   prop  checked     jQuery 1 5 and below      isAgeSelected   attr  checked     Any version of jQuery     Assuming an event handler on a checkbox if  this checked    All credit goes to Xian

User · Answer

Simply use it like below       isAgeSelected   change function          if    this  is   checked         or if     isAgeSelected   attr  checked      true                txtAge   show           else                txtAge   hide

User · Answer

Using pure JavaScript   let checkbox   document getElementById  checkboxID     if checkbox checked      alert  is checked      else     alert  not checked yet

User · Answer

For older versions of jQuery  I had to use following       change plan   live  click   function          var checked       change plan   attr  checked         if checked                Code                    else               Code

User · Answer

What about this solution       txtAge            isAgeSelected   is   checked          show         hide

User · Answer

I ran in to the exact same issue  I have an ASP NET checkbox   lt asp CheckBox ID  chkBox1  CssClass  cssChkBox1  runat  server    gt    In the jQuery code I used the following selector to check if the checkbox was checked or not  and it seems to work like a charm   if       cssChkBox1 input type checkbox     is   checked            else           I m sure you can also use the ID instead of the CssClass   if       cssChkBox1 input type checkbox     is   checked            else           I hope this helps you

User · Answer

How do I successfully query the checked property    The checked property of a checkbox DOM element will give you the checked state of the element   Given your existing code  you could therefore do this   if document getElementById  isAgeSelected   checked            txtAge   show      else           txtAge   hide        However  there s a much prettier way to do this  using toggle    x000D   x000D      isAgeSelected   click function     x000D          txtAge   toggle this checked   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  id  isAgeSelected   gt  x000D   lt div id  txtAge  style  display none  gt Age is something lt  div gt  x000D   x000D   x000D

User · Answer

This worked for me    get  isAgeSelected    checked    true   Where isAgeSelected is the id of the control   Also   karim79 s answer works fine  I am not sure what I missed at the time I tested it   Note  this is answer uses Microsoft Ajax  not jQuery

User · Answer

You can try the change event of checkbox to track the  checked state change   x000D   x000D      isAgeSelected   on  change   function       if      isAgeSelected   is   checked        alert  checked      else       alert  unchecked            x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt input type  checkbox  id  isAgeSelected    gt   lt div id  txtAge  style  display none  gt    Age is selected  lt  div gt  x000D   x000D   x000D

User · Answer

I m sure it s not some revelation  but I didn t see it all in one example   Selector for all checked checkboxes on the page       input type checkbox  checked

User · Answer

This is some different method to do the same thing    x000D   x000D    document  ready function     x000D   x000D          isAgeSelected   click function     x000D                 txtAge   toggle this checked   x000D   x000D             Using a pure CSS selector x000D          if    this checked     x000D              alert  on check 1    x000D             x000D   x000D             Using jQuery s is   method x000D          if    this  is   checked      x000D              alert  on checked 2    x000D             x000D   x000D                 Using jQuery s filter   method x000D          if    this  filter   checked      x000D              alert  on checked 3    x000D             x000D          x000D      x000D   lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt  x000D   lt input type  checkbox  id  isAgeSelected   gt  x000D   lt div id  txtAge  style  display none  gt Age is something lt  div gt  x000D   x000D   x000D

User · Answer

To act on a checkbox being checked or unchecked on click   x000D   x000D      customCheck1   click function       if  this checked        console log  checked        else       console log  un-checked            x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt input type  checkbox  id  customCheck1  gt  x000D   x000D   x000D   EDIT  Not a nice programming expression if  boolean    true  though  checked property might return other type variables as well   It is better to use  prop  quot checked quot   instead  It returns true and false only

User · Answer

This example is for button   Try the following    lt input type  button  class  check  id  checkall  value  Check All    gt    amp nbsp   lt input type  button  id  remove  value  Delete    gt   lt br  gt    lt input type  checkbox  class  cb-element   value  1    gt  Checkbox  1  lt br  gt   lt input type  checkbox  class  cb-element   value  2    gt  Checkbox  2  lt br  gt   lt input type  checkbox  class  cb-element   value  3    gt  Checkbox  3  lt br  gt        remove   attr  disabled    disabled        document  ready function                cb-element   click function              if   this  prop  checked                              remove   attr  disabled   false                     else                           remove   attr  disabled   true                                 check button   click function         var checked      this  data  checked           input checkbox   prop  checked   checked         this  data  checked   checked        if checked    true                  this  val  Uncheck All                 remove   attr  disabled   false              else if checked    false                  this  val  Check All                remove   attr  disabled   true

User · Answer

if  undefined        isAgeSelected   attr  checked               txtAge   hide      else           txtAge   show

User · Answer

if  undefined        isAgeSelected   attr  checked               txtAge   hide      else           txtAge   show

User · Answer

selector  attr  checked       undefined   This returns true if the input is checked and false if it is not

User · Answer

This was my workaround       vcGoButton   click function          var buttonStatus       vcChangeLocation   prop  checked        console log  Status is     buttonStatus       if  buttonStatus            var address       vcNewLocation   val            var cabNumber       vcVehicleNumber   val              get  postCabLocation php                  address  address  cabNumber  cabNumber                 function data                      console log  Changed vehicle     cabNumber     location to     address                                else           console log  VC go button clicked  but no location action

User · Answer

Use     this  toggle    input checkbox     this   0  checked     When you are selecting out of context  remember you need the  0  to access the checkbox

User · Answer

Though you have proposed a JavaScript solution for your problem  displaying a textbox when a checkbox is checked   this problem could be solved just by css  With this approach  your form works for users who have disabled JavaScript   Assuming that you have the following HTML    lt label for  show textbox  gt Show Textbox lt  label gt   lt input id  show textbox  type  checkbox    gt   lt input type  text    gt    You can use the following CSS to achieve the desired functionality     show textbox not  checked    input type text   display none     For other scenarios  you may think of appropriate CSS selectors   Here is a Fiddle to demonstrate this approach

User · Answer

Use this   if     input name  salary in Basic   checked   length  gt  0    The length is greater than zero if the checkbox is checked

User · Answer

Since jQuery 1 6  the behavior of jQuery attr   has changed and users are encouraged  not to use it to retrieve an element s checked state  Instead  you should use jQuery prop         txtAge   toggle          isAgeSelected   prop  checked      For checked attribute it returns true false                                             Return value changes with checkbox state      Two other possibilities are       txtAge   get 0  checked     txtAge   is   checked

User · Answer

chk   change function           this checked   alert  true     alert  false                chk   0  checked   alert  true     alert  false

User · Answer

if     checkkBoxId   is   checked       alert  Checked true        or  if     checkkBoxId   attr  checked      true     alert  checked true

User · Answer

I think it will be the simple one       isAgeSelected   change function         if   this  is   checked                  txtAge   show          else              txtAge   hide

User · Answer

Automated    document  ready function             isAgeSelected   change function                 alert   value          chkSelect   attr  checked                    HTML   lt b gt   lt input type  isAgeSelected  id  chkSelect    gt  Age Check  lt  b gt    lt br  gt  lt br  gt    lt input type  button  id  btnCheck  value  check    gt    jQuery    document  ready function             btnCheck   click function                 var isChecked       isAgeSelected   attr  checked             if  isChecked     checked               alert  check-box is checked            else             alert  check-box is not checked                 Ajax  function check         if  isAgeSelected            alert  check-box is checked        else         alert  check-box is not checked       function isAgeSelected         return   get  isAgeSelected   checked    true

User · Answer

I was having the same problem and none of the posted solutions seemed to work and then I found out that it s because ASP NET renders the CheckBox control as a SPAN with INPUT inside  so the CheckBox ID is actually an ID of a SPAN  not an INPUT  so you should use       isAgeSelected input     rather than      isAgeSelected     and then all methods listed above should work

User · Answer

This is the minimal amount of code I think I needed to do something like this effectively  I found this method to be useful  it returns an array of the check boxes that are checked and then you can use their value  this solution uses jQuery       This is how you get them var output       var checkedBoxes      DivCheckBoxesAreIn   children  input checked    if checkedBoxes length  lt   0        alert  Please select check boxes        return false         And this is how you use them  checkedBoxes each function         output     this value              Printing  output  will give you a comma-separated list of your values

[javascript] How do I check whether a checkbox is checked in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to checkbox