JavaScript check if checkbox checked

Question

I'm want to change background color using checkbox, but it work only once. Mean if i click it again nothing change.

<body>
    <label class="switch">
        <input type="checkbox" onclick="check();">
        <span class="slider round"></span>
    </label>
</body>

<script>
    function check() {
        if (document.getElementsByTagName('input').checked) {
            document.body.style.backgroundColor = 'white';
        } else {
            document.body.style.backgroundColor = 'black';
        }
    }
</script>

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Andreas, Jun 23 '18 at 14:16
`getElementsByTagName('input')` returns a list, do `getElementsByTagName('input')[0]` — nick zoum, Jun 23 '18 at 14:17
Try use search this answer for your question https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript — Slaawwa, Jun 23 '18 at 14:21

Mamun · Accepted Answer · 2018-06-23T14:38:10.063

The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name.

In this case you do not need to use getElementsByTagName() at all. Just pass this to the function so that you can refer that element in the function body like the following:

function check(chk) {
  if (chk.checked) {
      document.body.style.backgroundColor = 'white';
  } else {
      document.body.style.backgroundColor = 'black';
  }
}

<body>
    <label class="switch">
        <input type="checkbox" onclick="check(this);">
        <span class="slider round"></span>
    </label>
</body>

score 0 · Answer 2 · answered Jun 23 '18 at 14:17

Because of getElementsByTagName will response a list of elements. In your case, you have to choose the first element to check the checked

function check() {
  if (document.getElementsByTagName('input')[0].checked) {
    document.body.style.backgroundColor = 'white';
  } else {
    document.body.style.backgroundColor = 'black';
  }
}
check();

<body>
    <label class="switch">
        <input type="checkbox" onclick="check();">
        <span class="slider round"></span>
    </label>
</body>

JavaScript check if checkbox checked

2 Answers2