Comment obtenir toutes les cases à cocher cochées

Question

J'ai un ensemble de cases à cocher d'entrée portant le même nom. et je voudrais déterminer quelles cases ont été cochées en utilisant le javascript, comment puis-je y parvenir ? Je sais seulement comment obtenir toutes les cases à cocher de la manière suivante :

var checkboxes = document.getElementsByName('mycheckboxes');

Answer 1

Dans IE9+, Chrome ou Firefox, vous pouvez le faire :

var checkedBoxes = document.querySelectorAll('input[name=mycheckboxes]:checked');

Answer 2

Une simple boucle for qui teste le checked et ajoute les éléments cochés à un tableau distinct. À partir de là, vous pouvez traiter le tableau de checkboxesChecked si nécessaire.

// Pass the checkbox name to the function
function getCheckedBoxes(chkboxName) {
  var checkboxes = document.getElementsByName(chkboxName);
  var checkboxesChecked = [];
  // loop over them all
  for (var i=0; i<checkboxes.length; i++) {
     // And stick the checked ones onto an array...
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i]);
     }
  }
  // Return the array if it is non-empty, or null
  return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}

// Call as
var checkedBoxes = getCheckedBoxes("mycheckboxes");

Answer 3

Pour une simple doublure à deux (ou un), ce code peut être :

checkboxes = document.getElementsByName("NameOfCheckboxes");
selectedCboxes = Array.prototype.slice.call(checkboxes).filter(ch => ch.checked==true);

Ici, le Array.prototype.slice.call() convertit l'objet NodeList de toutes les cases à cocher portant ce nom ("NameOfCheckboxes") en un nouveau tableau, sur lequel vous utilisez ensuite la méthode de filtrage. Vous pouvez ensuite également, par exemple, extraire les valeurs des cases à cocher en ajoutant un objet .map(ch => ch.value) à la fin de la ligne 2. Le => est la notation de la fonction flèche de javascript.

Answer 4

Obtenez toutes les valeurs des cases à cocher cochées dans un tableau - en une ligne

const data = [...document.querySelectorAll('.inp:checked')].map(e => e.value);
console.log(data);

<div class="row">
    <input class="custom-control-input inp"type="checkbox" id="inlineCheckbox1" Checked value="option1"> 
    <label class="custom-control-label" for="inlineCheckbox1">Option1</label>
    <input class="custom-control-input inp"  type="checkbox" id="inlineCheckbox1" value="option2"> 
    <label class="custom-control-label" for="inlineCheckbox1">Option2</label>
    <input class="custom-control-input inp" Checked  type="checkbox" id="inlineCheckbox1" value="option3"> 
    <label class="custom-control-label" for="inlineCheckbox1">Option3</label>
</div>