Get the value of checked checkbox

Question

So I ve got code that looks like this    lt input class  messageCheckbox  type  checkbox  value  3  name  mailId    gt   lt input class  messageCheckbox  type  checkbox  value  1  name  mailId    gt    I just need Javascript to get the value of whatever checkbox is currently checked   EDIT  To add  there will only be ONE checked box

User · Answer

x000D   x000D    document  ready function     x000D    var ckbox      input name  ips      x000D    var chkId       x000D       input   on  click   function     x000D       x000D      if  ckbox is   checked      x000D           input name  ips   checked   each   function     x000D        chkId     this  val          x000D          chkId   chkId slice 0  -1   x000D          x000D          x000D         alert     this  val         return all values of checkboxes checked x000D         alert chkId      return value of checkbox checked 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  ips  value  12520  gt  x000D   lt input type  checkbox  name  ips  value  12521  gt  x000D   lt input type  checkbox  name  ips  value  12522  gt  x000D   x000D   x000D

User · Answer

If you re using Semantic UI React  data is passed as the second parameter to the onChange event   You can therefore access the checked property as follows    lt Checkbox label  Conference  onChange   e  d    gt  console log d checked     gt

User · Answer

In my project  I usually use this snippets  var type       quot input name  messageCheckbox   checked quot   each function  i                    type i      this  val                     And it works well

User · Answer

I am using this in my code Try this  var x     checkbox   is   checked      If the checkbox is checked x will be true otherwise it will be false

User · Answer

None of the above worked for me without throwing errors in the console when the box wasn t checked so I did something along these lines instead  onclick and the checkbox function are only being used for demo purposes  in my use case it s part of a much bigger form submission function     x000D   x000D  function checkbox     x000D    var checked   false  x000D    if  document querySelector   opt1 checked      x000D       checked   true  x000D      x000D    document getElementById  msg   innerText   checked  x000D    x000D   lt input type  checkbox  onclick  checkbox    id  opt1  gt   lt span id  msg  gt Click The Box lt  span gt  x000D   x000D   x000D

User · Answer

This does not directly answer the question  but may help future visitors     If you want to have a variable always be the current state of the checkbox  rather than having to keep checking its state   you can modify the onchange event to set that variable   This can be done in the HTML    lt input class  messageCheckbox  type  checkbox  onchange  some var this checked   gt    or with JavaScript   cb   document getElementsByClassName  messageCheckbox   0  cb addEventListener  change   function   some var   this checked

User · Answer

in plain javascript   function test         var cboxes   document getElementsByName  mailId          var len   cboxes length      for  var i 0  i lt len  i              alert i    cboxes i  checked   checked     unchecked      cboxes i  value             function selectOnlyOne current clicked        var cboxes   document getElementsByName  mailId          var len   cboxes length      for  var i 0  i lt len  i              cboxes i  checked    cboxes i     current

User · Answer

For modern browsers   var checkedValue   document querySelector   messageCheckbox checked   value    By using jQuery   var checkedValue       messageCheckbox checked   val      Pure javascript without jQuery   var checkedValue   null   var inputElements   document getElementsByClassName  messageCheckbox    for var i 0  inputElements i     i         if inputElements i  checked              checkedValue   inputElements i  value             break

User · Answer

If you want to get the values of all checkboxes using jQuery  this might help you  This will parse the list and depending on the desired result  you can execute other code  BTW  for this purpose  one does not need to name the input with brackets     I left them off      document  on  quot change quot    quot  messageCheckbox quot   function evnt       var data      quot  messageCheckbox quot        data each function          console log this defaultValue  this checked            Do something                      END LISTENER messageCheckbox

User · Answer

None of the above worked for me but simply use this   document querySelector   messageCheckbox   checked    Happy coding

User · Answer

Use this   alert     messageCheckbox   is   checked   val      This assumes the checkboxes to check have the class  messageCheckbox   otherwise you would have to do a check if the input is the checkbox type  etc

User · Answer

lt input class  messageCheckbox  type  checkbox  onchange  getValue this value   value  3  name  mailId    gt    lt input class  messageCheckbox  type  checkbox  onchange  getValue this value   value  1  name  mailId    gt      function getValue value       alert value

[javascript] Get the value of checked checkbox?

Examples related to javascript

Examples related to checkbox