Sprawdzenie checkboxów (checked) dla więcej niż jednego pytania (ANKIETA)

pytanie zadane 17 sierpnia 2017 w JavaScript przez Adiks Nowicjusz (240 p.)

Jesteście w stanie podpowiedzieć dlaczego się tak dzieje, że gdy sprawdzam zaznaczenie checkboxów o takim samym id, będących wewnątrz tego samego div'a, to gdy mam tylko jednego checkboxa jest wszystko ok, natomiast gdy dołożę kolejne checkboxy, to nie działa (nie wyświetla alertu)?

https://codepen.io/anon/pen/KvZowy

<form name="a" method="post" action="zapisz.html">
 
<div class="6"> <!-- pytanie nr 6 -->
    <h1>6. Co lubisz jeść?</h1>                 
    <input type="checkbox" id="checkagree" value="1"/>Schabowy<br/>
    <input type="checkbox" id="checkagree" value="2"/>Kebab<br/>
    <input type="checkbox" id="checkagree" value="3"/>Frytki
</div>
<input type="submit" value="Submit" onclick="sprawdz();" />
</form>


function sprawdz(){
 
if(a.checkagree.checked == false)
{
    alert('Wybierz co najmniej 1, maksymalnie 2 dania!');
    return false;
}
return true;
}

komentarz 17 sierpnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

if(a.checkagree.checked == false)

Nie dobieraj się w ten sposób do HTMLa. Wystarczy, że omyłkowo w kodzie w wyższym lub tym samym scope zadeklarujesz zmienną o tej samie nazwie (mam na myśli 'a'), a wtedy Twój if nie zadziała. Pobierz formularz poprzez ID lub inny atrybut jako obiekt DOM i dopiero wtedy sprawdzaj jego składowe.

Kontrolki forma możesz sobie pobrać taką funkcyjką:

function getFormControls( formReference ) {
  const formElements = [...formReference.elements];
  const controls = formElements.filter( ( ctrl ) => {
    return ctrl.getAttribute( 'name' );
  } );
  
  return controls;
}

const form = document.querySelector( '[name="testForm"]' );
const formControls = getFormControls( form );

console.log('formControls: ', formControls);

Całość: https://codepen.io/ChrissP92/pen/EvoMWM