Écouteur d'événements de vérification de la case à cocher

Question

J'ai récemment travaillé avec l'API de plugin de Chrome et je cherche à développer un plugin qui me facilitera la vie pour la gestion d'un site web.

Ce que je souhaite faire, c'est déclencher un événement lorsqu'une certaine case est cochée. Comme ce site Web ne m'appartient pas, je ne peux pas modifier le code et j'utilise donc l'API de Chrome. L'un des principaux problèmes est qu'au lieu d'avoir un ID, il y a un nom. Je me demandais si je pouvais déclencher la fonction lorsque la case à cocher correspondant au "nom" est cochée.

Answer 1

Réponse courte : Utilisez le change événement. Voici quelques exemples pratiques. Comme j'ai mal lu la question, je vais inclure des exemples de jQuery en plus de JavaScript. Vous ne gagnerez pas beaucoup, voire rien, en utilisant jQuery.

Case à cocher unique

Utilisation de querySelector .

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..");
  }
});

<input type="checkbox" name="checkbox" />

Case à cocher unique avec jQuery

$('input[name=checkbox]').change(function() {
  if ($(this).is(':checked')) {
    console.log("Checkbox is checked..")
  } else {
    console.log("Checkbox is not checked..")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="checkbox" />

Cases à cocher multiples

Voici un exemple de liste de cases à cocher. Pour sélectionner plusieurs éléments, nous utilisons querySelectorAll au lieu de querySelector . Ensuite, utilisez Array.filter y Array.map pour extraire les valeurs vérifiées.

// 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 => i.checked) // Use Array.filter to remove unchecked checkboxes.
      .map(i => i.value) // Use Array.map to extract only the checkbox values from the array of objects.

    console.log(enabledSettings)
  })
});

<label>
   <input type="checkbox" name="settings" value="forcefield">
   Enable forcefield
</label>
<label>
  <input type="checkbox" name="settings" value="invisibilitycloak">
  Enable invisibility cloak
</label>
<label>
  <input type="checkbox" name="settings" value="warpspeed">
  Enable warp speed
</label>

Cases à cocher multiples avec jQuery

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);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
   <input type="checkbox" name="settings" value="forcefield">
   Enable forcefield
</label>
<label>
  <input type="checkbox" name="settings" value="invisibilitycloak">
  Enable invisibility cloak
</label>
<label>
  <input type="checkbox" name="settings" value="warpspeed">
  Enable warp speed
</label>

Answer 2

Comme je ne vois pas le jQuery dans l'OP, voici une javascript seule 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
        }
    });
});

Voir JSFIDDLE

Answer 3

Si vous avez une case à cocher dans votre html quelque chose comme :

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

et vous voulez ajouter un EventListener à cette case à cocher en utilisant javascript, dans votre fichier js associé, vous pouvez faire comme suit :

checkbox = document.getElementById('conducted');

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

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

});