jQuery checkbox change and click event

Question

x000D   x000D    document  ready function     x000D      set initial state  x000D        textbox1   val   this  is   checked     x000D   x000D        checkbox1   change function     x000D          textbox1   val   this  is   checked     x000D        x000D   x000D        checkbox1   click function     x000D      if     this  is   checked      x000D        return confirm  Are you sure     x000D        x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  id  checkbox1   gt  lt br   gt  x000D   lt input type  text  id  textbox1   gt  x000D   x000D   x000D    Here  change   updates the textbox value with the checkbox status  I use  click   to confirm the action on uncheck  If the user selects cancel  the checkmark is restored but  change   fires before confirmation   This leaves things in an inconsistent state and the textbox says false when the checkbox is checked   How can I deal with the cancellation and keep textbox value consistent with the check state

User · Answer

Here you are  Html   lt input id  ProductId a183060c-1030-4037-ae57-0015be92da0e  type  checkbox  value  true  gt    JavaScript   lt script gt        document  ready function                input id   ProductId      click function               if    this  prop  checked                    do what you need here                 alert  Checked                      else                 do what you need here                     alert  Unchecked                                lt  script gt

User · Answer

Try this      let checkbox   document getElementById  checkboxId        if  checkbox checked    true                alert  quot select checkbox quot

User · Answer

Most of the answers won t catch it  presumably  if you use  lt label for  cbId  gt cb name lt  label gt   This means when you click the label it will check the box instead of directly clicking on the checkbox   Not exactly the question  but various search results tend to come here    lt div id  OuterDivOrBody  gt       lt input type  checkbox  id  checkbox1    gt       lt label for  checkbox1  gt Checkbox label lt  label gt       lt br   gt       lt br   gt      The confirm result       lt input type  text  id  textbox1    gt   lt  div gt    In which case you could use   Earlier versions of jQuery       OuterDivOrBody   delegate   checkbox1    change   function             From the other examples     if   this checked            var sure   confirm  Are you sure             this checked    sure              textbox1   val sure toString                 JSFiddle example with jQuery 1 6 4  jQuery 1 7       checkbox1   on  change   function             From the other examples     if   this checked            var sure   confirm  Are you sure             this checked    sure              textbox1   val sure toString                 JSFiddle example with the latest jQuery 2 x   Added jsfiddle examples and the html with the clickable checkbox label

User · Answer

Well    just for the sake of saving a headache  its past midnight here   I could come up with       checkbox1   click function       if     this  is   checked          var ans   confirm  Are you sure              textbox1   val ans             Hope it helps

User · Answer

this works on all browsers     document  ready function           set initial state          textbox1   val   this  is   checked              checkbox1   change function e            this checked      this  is   checked    amp  amp    confirm  Are you sure                 textbox1   val this checked           return true

User · Answer

if you are using the iCheck Jquery use the below code        CheckBoxId   on  ifChanged   function                      alert   this  val

User · Answer

document  ready function           set initial state          textbox1   val   this  is   checked              checkbox1   change function                 textbox1   val   this  is   checked                      checkbox1   click function             if     this  is   checked                  if  confirm  Are you sure                                       checkbox1   prop  checked   true                       textbox1   val   this  is   checked

User · Answer

For me this works great       checkboxID   click function          if    this  attr  checked              alert  is checked          else           alert  is not checked

User · Answer

person IsCurrentAddressSame   change function                  debugger         if      person IsCurrentAddressSame   checked                debugger                    else

User · Answer

Late answer  but you can also use on  quot change quot    x000D   x000D      check   on  change   function          var checked   this checked        span   html checked toString        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  check  gt   lt span gt Check me  lt  span gt  x000D   x000D   x000D

User · Answer

Try this      checkbox1   click function             if   this checked                var sure   confirm  Are you sure                 this checked   sure                  textbox1   val sure toString

User · Answer

Demo Use mousedown     checkbox1   mousedown function         if     this  is   checked              this checked   confirm  quot Are you sure  quot              this  trigger  quot change quot

User · Answer

Checkbox click and checking for the value in the same event loop is the problem   Try this       checkbox1   click function         var self   this      setTimeout function              if   self checked                var ans   confirm  Are you sure                 self checked   ans                  textbox1   val ans toString                      0         Demo  http   jsfiddle net mrchief JsUWv 6

User · Answer

checkbox1   click function         if   this  is   checked              var returnVal   confirm  Are you sure               this  attr  checked   returnVal                 textbox1   val   this  is   checked             lt div id  check  gt       lt input type  checkbox  id  checkbox1    gt       lt input type  text  id  textbox1    gt   lt  div gt

User · Answer

Get rid of the change event  and instead change the value of the textbox in the click event  Rather than returning the result of the confirm  catch it in a var  If its true  change the value  Then return the var

User · Answer

Tested in JSFiddle and does what you re asking for This approach has the added benefit of firing when a label associated with a checkbox is clicked    Updated Answer     document  ready function           set initial state          textbox1   val this checked            checkbox1   change function             if this checked                var returnVal   confirm  Are you sure                   this  prop  checked   returnVal                         textbox1   val this checked                         Original Answer     document  ready function           set initial state          textbox1   val   this  is   checked              checkbox1   change function             if   this  is   checked                  var returnVal   confirm  Are you sure                   this  attr  checked   returnVal                         textbox1   val   this  is   checked

User · Answer

Try  x000D   x000D  checkbox1 onclick  e   gt      if  checkbox1 checked  checkbox1 checked    confirm  Are you sure       textbox1 value   checkbox1 checked    x000D   lt input type  checkbox  id  checkbox1    gt  lt br   gt   lt input type  text  id  textbox1  value  false   gt  x000D   x000D   x000D

User · Answer

I am not sure why everyone is making this so complicated   This is all I did    if    this  is   checked     console log  on

User · Answer

simply just use click event  my check box id is CheckAll           CheckAll   click function               if      CheckAll   is   checked      true                  alert

User · Answer

get radio value by name      input   on  className   function event           console log   this  attr  name             if   this  attr  name       worker                                 resetAll

[javascript] jQuery checkbox change and click event

Examples related to javascript

Examples related to jquery

Examples related to checkbox

Examples related to event-handling