Run function if one radio input has been checked out of a group

Question

I saw a similar question answered before, but they were too complicated for me to understand, i want a very easy way to do it, if thats possible.

So i have 6 radio inputs. I want a function to run when one of them (whichever) is checked.

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>

script:

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

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

(The if is inside a function that is started by a click)

As you might imagine this doesn't work, so what do I do? I need super simple answers/solutions, as I am not the best in this, thank you :D

Does this answer your question? [How can I check whether a radio button is selected with JavaScript?](https://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-with-javascript) — Utsav Patel, Apr 17 '20 at 11:51

goto · Accepted Answer · 2020-04-17T13:15:27.997

0

One way you could go about this is to iterate through all radio buttons when the div element is clicked and see if any of them is checked.

Here's an example:

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 />

edited Apr 17 '20 at 13:15

answered Apr 17 '20 at 11:57

goto

4,336
15
20

Thank you so much, but this was too hard for me to understand. Greatly appreciated though! – Grude Apr 17 '20 at 12:13
@Grude What is confusing in this example? – goto Apr 17 '20 at 12:20
1 I dont understand how it works and i am not sure if thats what iam looking for. Is there really no easy way to do this, everything seems so hard :( – Grude Apr 17 '20 at 12:23
Could be that i just formed my question really bad and excluded a few stuff from my code. But its basically that i have a function that runs by clicking on a div, but inside this function i have this "if", that starts the animation and sound JUST when a random radio is clicked. If that made any sense. – Grude Apr 17 '20 at 12:27
@Grude I'd be helpful if you could provide an example that does exactly what you say. Clicking on a `div` doesn't trigger a select on a radio button, so you should still create event listeners for the `click` event on your radio buttons and do whatever you need when that event triggers. – goto Apr 17 '20 at 12:47
I have event listeners and the function runs when i click the div, i just want the IF to run when one random radio box is checked, because if not, the animasjon and sound runs when its clicked. – Grude Apr 17 '20 at 12:51
@Grude have a look at my updated answer - hopefully this somewhat resembles the setup you have on your end. – goto Apr 17 '20 at 13:02
I looked at it now, and i think you misunderstood me. Maybe i am just bad at explaining, but i really really do appreciate you trying and all the efforts you put into this, i just explain bad. I appreciate it like i said, but dont worry about making me understand it, help someone else that needs it more. Thank you anyways! – Grude Apr 17 '20 at 13:28
I just found an easy solution! if (AR.checked === true || SMG.checked === true || SG.checked === true || LMG.checked === true || MR.checked === true || SR.checked === true) – Grude Apr 17 '20 at 13:43
@Grude that's essentially what I am doing inside of that `for` loop - it makes it a lot easier to just do it that way so that you don't have to check those radio buttons individually and do the check manually. – goto Apr 17 '20 at 13:47
Yes but i am really new to for loops and its hard to understand for me, your answer is probably perfect, its just that i dont understand it. But luckily what i did was super easy and it works (would suck if it was a lot of radio buttons, but for this project its okay), thank you for everything again! – Grude Apr 17 '20 at 13:51
Learnt more about for loops, and looked back at this, and it worked perfectly! But i just changed it to fit checkboxes instead. Thank you so much! – Grude May 13 '20 at 13:44

score 0 · Answer 2 · answered Apr 17 '20 at 12:03

Here a sample

Hope it's help you.

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>

Thank you for helping! But found an easy solution. – Grude Apr 17 '20 at 13:55 — Grude, Apr 17 '20 at 13:55

score 0 · Answer 3 · answered Apr 17 '20 at 13:25

0

The reason your attempt doesn't work is because querySelectorAll returns a non-live NodeList.

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

The returned NodeList doesn't have the property checked. Instead you should check if one of the elements in the list is checked.

You can convert any iterable object to an array using Array.from(). You can then use Array.prototype.some() to check if at least one of the elements is checked.

const oneOrMoreChecked = Array.from(alleRadio).some(input => input.checked);
//     ^ true or false

answered Apr 17 '20 at 13:25

3limin4t0r

19,353
2
31
52

Thank you for this! But i just figured out how to do it: if (AR.checked === true || SMG.checked === true || SG.checked === true || LMG.checked === true || MR.checked === true || SR.checked === true) – Grude Apr 17 '20 at 13:43
@Grude You don't have to specifically compare with `true`, the following would also work fine: `if (AR.checked || SMG.checked || SG.checked || LMG.checked || MR.checked || SR.checked)` – 3limin4t0r Apr 17 '20 at 13:47

Grude · Answer 4 · 2020-04-20T22:56:08.703

0

Make a var of each radio input with document.querySelector("#ID") Example:

HTML:

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

script:

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


if (AR.checked || SMG.checked || SG.checked || LMG.checked || MR.checked || SR.checked)

edited Apr 20 '20 at 22:56

answered Apr 17 '20 at 13:44

Grude

3
3

Run function if one radio input has been checked out of a group

4 Answers4