See if any checkboxes (of the same name) are checked?

Question

I have several checkboxes in a form (all of the same name) 'delsel2' like this:

<input type="checkbox" name="delsel2" value="100">
<input type="checkbox" name="delsel2" value="101">
<input type="checkbox" name="delsel2" value="102">

I want to be able to simply bring up an alert when any of them are selected, and display a message indicating whether any of them are ticked, or not.

I have come up with this, but it doesn't work:

document.getElementById("delsel2").addEventListener("click", checkstate);

function checkstate(){
    if (document.getElementById("delsel2").checked) {
        alert("Checked");
    } else {
        alert("Not Checked");
    }
}

But nothing happens? What am I doing wrong? Many thanks for any help.

score 4 · Accepted Answer · answered Apr 01 '20 at 23:42

You should iterate over all elements returned by getElementsByName:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <style>
    </style>

</head>
<body>

<div class="container">
    <input type="checkbox" name="delsel2" value="100">
    <input type="checkbox" name="delsel2" value="101">
    <input type="checkbox" name="delsel2" value="102">

</div>


<script>
    let elems = document.getElementsByName("delsel2")
    for (let i = 0; i < elems.length; i++) {
        elems[i].addEventListener("click", checkstate);
    }

    function checkstate() {
        let elems = document.getElementsByName("delsel2");
        let checked = false;
        for (let i = 0; i < elems.length; i++) {
            if (elems[i].checked) {
                checked = true;
            }
        }
        if (checked) {
            alert("Checked");
        } else {
            alert("Not Checked");
        }
    }
</script>

</body>
</html>

Hello, this at least does something which is more than mine did! However, it only displays 'Checked' when all three are checked, not when at least one of them is checked? — nb86, Apr 01 '20 at 23:46
If you add the script in the head of the html, it runs before everything else, check out this topic:https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup — Thiago Romano, Apr 02 '20 at 04:27

score 0 · Answer 2 · answered Apr 01 '20 at 23:37

You're using Document.getElementById() but the input field does not have any id attribute.

You can add it <input type="checkbox" name="delsel2" id="delsel2" value="100">. Remember that the id should be unique:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Phll2 · Answer 3 · 2020-04-02T00:29:56.453

<input type="checkbox" name="delsel2" value="100">
<input type="checkbox" name="delsel2" value="101">
<input type="checkbox" name="delsel2" value="102">

<script>
  const checkstate = () => alert(Array
    .from(document.querySelectorAll('[name="delsel2"]'))
    .some(({ checked }) => checked) ? 'Checked' : 'Not Checked')

  document
    .querySelectorAll('[name="delsel2"]')
    .forEach(({ addEventListener }) => addEventListener('click', checkstate))                                                  
</script>

See if any checkboxes (of the same name) are checked?

3 Answers3