J'ai vu une réponse à une question similaire auparavant, mais elles étaient trop compliquées pour que je comprenne, je veux un moyen très facile de le faire, si c'est possible.

J'ai donc 6 entrées radio. Je veux qu'une fonction s'exécute lorsque l'une d'entre elles (quelle qu'elle soit) est cochée.

Html:

<input type="radio" id="AR" name="gun"> Assault Rifles <br>
<input type="radio" id="SMG" name="gun"> Submachine Guns <br>
<input type="radio" id="SG" name="gun"> Shotguns <br>
<input type="radio" id="LMG" name="gun"> Light Machine Guns <br>
<input type="radio" id="MR" name="gun"> Marksman Rifles <br>
<input type="radio" id="SR" name="gun"> Sniper Rifles <br> <br>

Scénario:

var alleRadio = document.querySelectorAll("input");

if (alleRadio.checked === true) {}

(Le if est à l'intérieur d'une fonction qui est lancée par un clic)

Comme vous pouvez l'imaginer, cela ne fonctionne pas, alors que dois-je faire? J'ai besoin de réponses / solutions super simples, car je ne suis pas le meilleur dans ce domaine, merci: D

0
Grude 17 avril 2020 à 14:46

5 réponses

Meilleure réponse

Faites une var de chaque entrée radio avec document.querySelector ("# ID") Exemple:

HTML:

<input type="radio" id="AR" name="gun"> Assault Rifles

Scénario:

var AR = document.querySelector("#AR")


if (AR.checked || SMG.checked || SG.checked || LMG.checked || MR.checked || SR.checked)
0
Grude 20 avril 2020 à 22:56

Voici un échantillon

J'espère que cela vous aidera.

App.js:

const inputs = document.querySelectorAll('.radio');

inputs.forEach(input => input.addEventListener('change', (evt) => {
    if(evt.target.checked) {
      // Launch your function
      console.log('check');
  }
}));

Index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="radio" id="AR" name="gun" class="radio"> Assault Rifles <br>
    <input type="radio" id="SMG" name="gun" class="radio"> Submachine Guns <br>
    <input type="radio" id="SG" name="gun" class="radio"> Shotguns <br>
    <input type="radio" id="LMG" name="gun" class="radio"> Light Machine Guns <br>
    <input type="radio" id="MR" name="gun" class="radio">  Marksman Rifles <br>
    <input type="radio" id="SR" name="gun" class="radio"> Sniper Rifles <br> <br>

    <script src="app.js"></script>
</body>

</html>
0
NmiDev 17 avril 2020 à 12:03

Vous pouvez vérifier la propriété length de l'entrée vérifiée. Vous pouvez également spécifier l'attribut nom des éléments dans le cadre du sélecteur pour rendre le sélecteur plus précis.

Démo:

var checkedRadio = document.querySelectorAll("input[name=gun]:checked");
if (checkedRadio.length) {
 alert('checked')
}
<input type="radio" id="AR" name="gun"> Assault Rifles <br>
<input type="radio" id="SMG" name="gun"> Submachine Guns <br>
<input type="radio" id="SG" name="gun"> Shotguns <br>
<input type="radio" id="LMG" name="gun"> Light Machine Guns <br>
<input type="radio" id="MR" name="gun" checked> Marksman Rifles <br>
<input type="radio" id="SR" name="gun"> Sniper Rifles <br> <br>
0
Mamun 17 avril 2020 à 11:55

Une façon de procéder consiste à parcourir tous les boutons radio lorsque l'élément div est cliqué et à voir si l'un d'eux est checked.

Voici un exemple:

var div = document.querySelector("div");

div.addEventListener("click", function() {
  // select all input elements with type of `radio` from the page
  var radioButtons = document.querySelectorAll('input[type="radio"]');
  var checkedRadioButton = null;
  
  // iterate through all radio buttons that have been found
  for (var i = 0; i < radioButtons.length; i++) {   
    // save a reference to each individual radio button
    var radioBtn = radioButtons[i];
    
    // if a checked radio button hasn't been found yet and
    // the current radio button is checked, mark it as such
    // since we only care about just ANY checked button
    if (!checkedRadioButton && radioBtn.checked) {
      checkedRadioButton = radioBtn;
    }
  }
  
  // check if `checkedRadioButton` is not `null`
  if (checkedRadioButton) {
    // do whatever you need here, e.g. call a function
    myFunction(checkedRadioButton);
  }
  
  if (!checkedRadioButton) {
    console.log('select a random radio button and click again!');
  }
})

function myFunction(radioBtn) {
  // do whatever you need to do with that information here
  console.log(radioBtn);
  console.log('radioBtn.checked', radioBtn.checked)
}
div {
  border: 1px solid red;
}
<div>Clicking on this DIV will trigger a `click` event!</div>

<input type="radio" id="AR" name="gun" /> Assault Rifles <br />
<input type="radio" id="SMG" name="gun" /> Submachine Guns <br />
<input type="radio" id="SG" name="gun" /> Shotguns <br />
<input type="radio" id="LMG" name="gun" /> Light Machine Guns <br />
<input type="radio" id="MR" name="gun" /> Marksman Rifles <br />
<input type="radio" id="SR" name="gun" /> Sniper Rifles <br />
0
goto1 17 avril 2020 à 13:15

La raison pour laquelle votre tentative ne fonctionne pas est que {{X0} } renvoie un NodeList.

var alleRadio = document.querySelectorAll("input");

Le NodeList retourné n'a pas la propriété checked. Au lieu de cela, vous devez vérifier si l'un des éléments de la liste est vérifié.

Vous pouvez convertir tout objet itérable en tableau à l'aide de Array.from(). Vous pouvez ensuite utiliser Array.prototype.some() pour vérifier si au moins un des éléments est coché.

const oneOrMoreChecked = Array.from(alleRadio).some(input => input.checked);
//     ^ true or false
0
3limin4t0r 17 avril 2020 à 13:25