Checkbox Check Event Listener

Question

Recently I have been working with the Chrome Plugin API and I am looking to develop a plugin which will make life easier for me for managing a website   Now what I wish to do is to fire an event when a certain checkbox is checked  As this website does not belong to me I cannot change the code therefore I am using the Chrome API  One of the main problems is that rather than there being an ID  there is a Name  I was wondering if I could fire the function once the certain checkbox with the  name  is checked

User · Answer

If you have a checkbox in your html something like:

<input id="conducted" type = "checkbox" name="party" value="0">

and you want to add an EventListener to this checkbox using javascript, in your associated js file, you can do as follows:

checkbox = document.getElementById('conducted');

checkbox.addEventListener('change', e => {

    if(e.target.checked){
        //do something
    }

});

User · Answer

Since I don t see the jQuery tag in the OP  here is a javascript only option    document addEventListener  DOMContentLoaded   function  event        var  selector   document querySelector  input name myCheckbox          selector addEventListener  change   function  event            if   selector checked                   do something if checked           else                  do something else otherwise                         See JSFIDDLE

User · Answer

Short answer  Use the change event  Here s a couple of practical examples  Since I misread the question  I ll include jQuery examples along with plain JavaScript  You re not gaining much  if anything  by using jQuery though  Single checkbox Using querySelector   x000D   x000D  var checkbox   document querySelector  input name checkbox      checkbox addEventListener  change   function       if  this checked        console log  Checkbox is checked          else       console log  Checkbox is not checked              x000D   lt input type  checkbox  name  checkbox    gt  x000D   x000D   x000D   Single checkbox with jQuery  x000D   x000D     input name checkbox    change function       if    this  is   checked          console log  Checkbox is checked         else       console log  Checkbox is not 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  name  checkbox    gt  x000D   x000D   x000D   Multiple checkboxes Here s an example of a list of checkboxes  To select multiple elements we use querySelectorAll instead of querySelector  Then use Array filter and Array map to extract checked values   x000D   x000D     Select all checkboxes with the name  settings  using querySelectorAll  var checkboxes   document querySelectorAll  input type checkbox  name settings     let enabledSettings          For IE11 support  replace arrow functions with normal functions and use a polyfill for Array forEach  https   vanillajstoolkit com polyfills arrayforeach         Use Array forEach to add an event listener to each checkbox  checkboxes forEach function checkbox      checkbox addEventListener  change   function         enabledSettings          Array from checkboxes     Convert checkboxes to an array to use filter and map         filter i   gt  i checked     Use Array filter to remove unchecked checkboxes         map i   gt  i value     Use Array map to extract only the checkbox values from the array of objects             console log enabledSettings           x000D   lt label gt      lt input type  checkbox  name  settings  value  forcefield  gt     Enable forcefield  lt  label gt   lt label gt     lt input type  checkbox  name  settings  value  invisibilitycloak  gt    Enable invisibility cloak  lt  label gt   lt label gt     lt input type  checkbox  name  settings  value  warpspeed  gt    Enable warp speed  lt  label gt  x000D   x000D   x000D   Multiple checkboxes with jQuery  x000D   x000D  let checkboxes      input type checkbox  name settings    let enabledSettings           Attach a change event handler to the checkboxes  checkboxes change function       enabledSettings   checkboxes      filter   checked      Filter out unchecked boxes       map function        Extract values using jQuery map        return this value               get      Get array         console log enabledSettings       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt label gt      lt input type  checkbox  name  settings  value  forcefield  gt     Enable forcefield  lt  label gt   lt label gt     lt input type  checkbox  name  settings  value  invisibilitycloak  gt    Enable invisibility cloak  lt  label gt   lt label gt     lt input type  checkbox  name  settings  value  warpspeed  gt    Enable warp speed  lt  label gt  x000D   x000D   x000D

[javascript] Checkbox Check Event Listener

Examples related to javascript

Examples related to html

Examples related to google-chrome

Examples related to google-chrome-extension

Examples related to dom-events