Checkbox is always showing undefined. Cant get the functionality for .checked to work

Question

I cant seem to get these checkboxes to work properly. I want to check each of these checkboxes to see if there checked, then im going to use that data to run another snippet of code later on in my program. Problem is, no matter if the checkbox is checked or not it always returns an undefined value.

This is the function in JS.

    function meal_update_multi() {
        let multimeal = document.getElementsByName('breakfast')
        let brek = document.getElementById('#breakfast_selector')
        let lunch = document.getElementById('#lunch_selector')
        let din = document.getElementById('#dinner_selector')
            if (multimeal.checked) {
                console.log('YOU CHECKED ALL THE BOXES DUMMY')
            }
                else 
                    alert('YOU DID NOT CHECK ALL THE BOXES')
                    console.log(multimeal.checked)
        }

This is the HTML its paired with

                <form id = 'remove_meal_mutiple_choice' onsubmit = 'return false'>
                    <h1>What Meals do you want to remove?</h1>
                    <input type = 'checkbox' name = 'breakfast' id = 'breakfast_selector'>
                        <label for = 'breakfast_selector'>Breakfast</label>
                    <input type = 'checkbox' name = 'lunch' id = 'lunch_selector'>
                        <label for = 'lunch_selector'>Lunch</label>
                    <input type = 'checkbox' name = 'dinner' id = 'dinner_selector'>
                        <label for = 'dinner_selector'>Dinner</label>
                    <button class = 'submit' type = 'submit' onclick = 'update_meals()'>Submit</button>
                </form>

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Ivar, Sep 15 '21 at 14:49
Can you please show the screenshot of the exact error? I want to check if update_meals() is defined or not. — Anshuman Yadav, Sep 15 '21 at 14:53
@AnshumanYadav Please don't ask people for screenshots of errors. [We actively encourage users **not** to add images of text.](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-errors-when-asking-a-question). — Ivar, Sep 15 '21 at 14:55

score 0 · Answer 1 · answered Sep 15 '21 at 14:56

0

document.getElementsByName('breakfast') will return an array, not a single node. So you have to loop through this array to check if all has been checked. Also the name should be same for all checkboxes to select all checkboxes using document.getElementsByName

function meal_update_multi() {
  let multimeal = document.getElementsByName('breakfast');
  let allChecked = true;
  multimeal.forEach((node) => allChecked &= node.checked);
  if (allChecked) {
    console.log('YOU CHECKED ALL THE BOXES DUMMY')
  }
  else {
    alert('YOU DID NOT CHECK ALL THE BOXES');
  }
  // console.log(multimeal.checked)
}

<form id='remove_meal_mutiple_choice' onsubmit='return false'>
  <h1>What Meals do you want to remove?</h1>
  <input type='checkbox' name='breakfast' id='breakfast_selector'>
  <label for='breakfast_selector'>Breakfast</label>
  <input type='checkbox' name='breakfast' id='lunch_selector'>
  <label for='lunch_selector'>Lunch</label>
  <input type='checkbox' name='breakfast' id='dinner_selector'>
  <label for='dinner_selector'>Dinner</label>
  <button type="button" onclick="meal_update_multi()">meal_update_multi</button>
  <button class='submit' type='submit' onclick='update_meals()'>Submit</button>
</form>

answered Sep 15 '21 at 14:56

Nitheesh

19,238
3
22
49

This is a [_very_ commonly asked question](https://stackoverflow.com/questions/linked/10693845?sort=newest). Really no reason to add _yet_ another answer to it. – Ivar Sep 15 '21 at 14:59
1

I have voted to close as such. And the down vote button tool tip states "This answer is not useful". What you consider useful may vary per person, but repeating the same answer yet again isn't very useful in my option and only helps to spread the information, which is what we try to avoid by marking questions as duplicate. As [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) suggests: "Not all questions can or should be answered here. Save yourself some frustration and avoid trying to answer questions which... have already been asked and answered many times before." – Ivar Sep 15 '21 at 15:05
I appreciated your answer either way. I found a solution for it before I came back to stack overflow. The information you provided about getElementByName was very valuable and I thank you for it. – Lilrebel17 Sep 15 '21 at 15:16
@Lilrebel17 if this helped you and was what you were looking for, please consider approving the answer – Nitheesh Sep 15 '21 at 15:32
Unfortunatley it wasnt what I was looking for, it was good information though and I appreciate it. – Lilrebel17 Sep 15 '21 at 16:43

score 0 · Answer 2 · answered Sep 15 '21 at 15:13

I actually found out what I was doing wrong, instead of document.getElementsByName I needed to use document.QuerySelector() to get the true value I was looking for. As stated in another answer above, getElementsByName was returning an array and giving me undefined, QuerySelector allows me to check each one individually by setting variables for each checkbox and just checking them all in an if statment. If you have a better way I would be intrested to hear it.

The Code Snippet that fixed it.

function meal_update_multi() {
        let brek = document.querySelector('#breakfast_selector')
        let lunch = document.querySelector('#lunch_selector')
            if (brek.checked === true && lunch.checked === true && din.checked === true) {
                console.log('YOU CHECKED ALL THE BOXES DUMMY')
            }
                else 
                    alert('YOU DID NOT CHECK ALL THE BOXES')
                    console.log(brek.checked)
        }

Why `document.querySelector('#breakfast_selector')`? and whynot `document.getElementById('breakfast_selector')`? — Nitheesh, Sep 16 '21 at 07:07

Checkbox is always showing undefined. Cant get the functionality for .checked to work

2 Answers2