Check Uncheck checkbox with JavaScript

Question

How can a checkbox be checked unchecked using JavaScript

User · Answer

function setCheckboxValue checkbox value        if  checkbox checked  value          checkbox click

User · Answer

If  for some reason  you don t want to  or can t  run a  click   on the checkbox element  you can simply change its value directly via its  checked property  an IDL attribute of  lt input type  checkbox  gt     Note that doing so does not fire the normally related event  change  so you ll need to manually fire it to have a complete solution that works with any related event handlers   Here s a functional example in raw javascript  ES6     x000D   x000D  class ButtonCheck   x000D    constructor     x000D      let ourCheckBox   null  x000D      this ourCheckBox   document querySelector   checkboxID    x000D   x000D      let checkBoxButton   null  x000D      this checkBoxButton   document querySelector   checkboxID button aria-label  checkboxID      x000D   x000D      let checkEvent   new Event  change    x000D       x000D      this checkBoxButton addEventListener  click   function     x000D        let checkBox   this ourCheckBox  x000D   x000D          toggle the checkbox  invert its state  x000D        checkBox checked    checkBox checked  x000D   x000D          let other things know the checkbox changed x000D        checkBox dispatchEvent checkEvent   x000D        bind this   true   x000D   x000D      this eventHandler   function e    x000D        document querySelector   checkboxfeedback   insertAdjacentHTML  beforeend     lt br   gt Event occurred on checkbox  Type      e type     checkbox state now      this ourCheckBox checked   x000D   x000D        x000D   x000D   x000D        demonstration  we will see change events regardless of whether the checkbox is clicked or the button x000D   x000D      this ourCheckBox addEventListener  change   function e    x000D        this eventHandler e   x000D        bind this   true   x000D   x000D        demonstration  if we bind a click handler only to the checkbox  we only see clicks from the checkbox x000D   x000D      this ourCheckBox addEventListener  click   function e    x000D        this eventHandler e   x000D        bind this   true   x000D   x000D   x000D      x000D    x000D   x000D  var init   function     x000D    const checkIt   new ButtonCheck    x000D    x000D   x000D  if  document readyState     loading     x000D    init  x000D    else   x000D    document addEventListener  DOMContentLoaded   init   x000D    x000D   lt input type  checkbox  id  checkboxID    gt  x000D   x000D   lt button aria-label  checkboxID  gt Change the checkbox  lt  button gt  x000D   x000D   lt div class  checkboxfeedback  gt No changes yet  lt  div gt  x000D   x000D   x000D    If you run this and click on both the checkbox and the button you should get a sense of how this works   Note that I used document querySelector for brevity simplicity  but this could easily be built out to either have a given ID passed to the constructor  or it could apply to all buttons that act as aria-labels for a checkbox  note that I didn t bother setting an id on the button and giving the checkbox an aria-labelledby  which should be done if using this method  or any number of other ways to expand this  The last two addEventListeners are just to demo how it works

User · Answer

I agree with the current answers  but in my case it does not work  I hope this code help someone in the future      check     checkbox id   click

User · Answer

Important behaviour that has not yet been mentioned   Programmatically setting the checked attribute  does not fire the change event of the checkbox   See for yourself in this fiddle  http   jsfiddle net fjaeger L9z9t04p 4    Fiddle tested in Chrome 46  Firefox 41 and IE 11   The click   method  Some day you might find yourself writing code  which relies on the event being fired  To make sure the event fires  call the click   method of the checkbox element  like this   document getElementById  checkbox   click      However  this toggles the checked status of the checkbox  instead of specifically setting it to true or false  Remember that the change event should only fire  when the checked attribute actually changes   It also applies to the jQuery way  setting the attribute using prop or attr  does not fire the change event   Setting checked to a specific value  You could test the checked attribute  before calling the click   method  Example   function toggle checked      var elm   document getElementById  checkbox      if  checked    elm checked        elm click            Read more about the click method here  https   developer mozilla org en-US docs Web API HTMLElement click

User · Answer

vanilla  PHP  will check box on and off and store result   lt  php     if  serverVariable   quot checked quot             checked    quot checked quot       else          checked    quot  quot     gt   lt input type  quot checkbox quot   name  quot deadline quot  value  quot yes quot   lt     checked    gt   gt     on server  lt  php         if isset   POST  deadline    and                POST  deadline     yes                 serverVariable   checked              else               serverVariable    quot  quot       gt

User · Answer

I would like to note  that setting the  checked  attribute to a non-empty string leads to a checked box    So if you set the  checked  attribute to  false   the checkbox will be checked  I had to set the value to the empty string  null or the boolean value false in order to make sure the checkbox was not checked

User · Answer

lt script type  text javascript  gt        document  ready function                  selecctall   click function  event                if  this checked                        checkbox1   each function                          this checked   true                                    else                       checkbox1   each function                          this checked   false                                                           lt  script gt

User · Answer

Try This     Check document getElementById  checkbox   setAttribute  checked    checked       UnCheck document getElementById  chk   removeAttribute  checked

User · Answer

to check   document getElementById  id-of-checkbox   checked   true    to uncheck   document getElementById  id-of-checkbox   checked   false

User · Answer

Javascript      Check document getElementById  checkbox   checked   true      Uncheck document getElementById  checkbox   checked   false    jQuery  1 6        Check     checkbox   prop  checked   true       Uncheck     checkbox   prop  checked   false     jQuery  1 5-       Check     checkbox   attr  checked   true       Uncheck     checkbox   attr  checked   false

User · Answer

For single check try   x000D   x000D  myCheckBox checked 1 x000D   lt input type  checkbox  id  myCheckBox  gt  Call to her x000D   x000D   x000D    for multi try   x000D   x000D  document querySelectorAll   imChecked   forEach c  gt  c checked 1  x000D  Buy wine   lt input type  checkbox  class  imChecked  gt  lt br gt  x000D  Play smooth-jazz music   lt input type  checkbox  gt  lt br gt  x000D  Shave   lt input type  checkbox  class  imChecked  gt  lt br gt  x000D   x000D   x000D

User · Answer

We can checked a particulate checkbox as      id of the checkbox   0  checked   true   and uncheck by       id of the checkbox   0  checked   false

[javascript] Check/Uncheck checkbox with JavaScript

Examples related to javascript

Examples related to checkbox