Mam kilka pól wyboru w formularzu (wszystkie o tej samej nazwie) „delsel2” w następujący sposób:

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

Chcę mieć możliwość wywołania alertu po wybraniu któregokolwiek z nich i wyświetlenia komunikatu wskazującego, czy któryś z nich jest zaznaczony, czy nie.

Wymyśliłem to, ale to nie działa:

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

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

Ale nic się nie dzieje? Co ja robię źle? Wielkie dzięki za wszelką pomoc.

0
nb86 2 kwiecień 2020, 02:26

3 odpowiedzi

Najlepsza odpowiedź

Powinieneś iterować po wszystkich elementach zwracanych przez 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> 
4
Thiago Romano 1 kwiecień 2020, 23:42

Używasz Document.getElementById (), ale pole wejściowe nie ma żadnego atrybutu id.

Możesz go dodać <input type="checkbox" name="delsel2" id="delsel2" value="100">. Pamiętaj, że id powinno być niepowtarzalne:

Atrybut id określa unikalny identyfikator (ID) elementu. Wartość musi być unikalna wśród wszystkich identyfikatorów w głównym poddrzewie elementu i musi zawierać co najmniej jeden znak. Wartość nie może zawierać żadnych znaków spacji.

0
Luís Ramalho 1 kwiecień 2020, 23:37
<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>
0
Phll2 2 kwiecień 2020, 00:29