javascript - How can I produce an alert if three out of nine checkboxes are checked? -

i have 9 checkboxes linked 9 images , 3 of them use name 'correct' using code shown below.

<div class="nine">             <label for="correct1"><img class="picture1" src="picture1.jpg"/></label>             <input type="checkbox" class="chk" id="correct1" name="correct"/>             </div> 

the remaining 6 unnamed using code shown below.

<div class="nine">             <label for="incorrect1"><img class="picture4" src="picture4.jpg"/></label>             <input type="checkbox" class="chk" id="incorrect4"/>             </div> 

i have following code produce alert if 3 checkboxes name "correct" checked isn't working.

<script> var i, correct = document.getelementsbyname('correct');             (i = 0; <= correct.length; i++) {                 if (correct[i].checked) {                     alert('correct');                     return true;                 }             }             alert('incorrect');             return false;             </script> 

can me this?

using es6:

const correctinputs = [...document.queryselectorall('input[name="correct"]')];    const alertifthree = () => {    const checkedcorrectinputs = correctinputs.filter(input => input.checked);    if (checkedcorrectinputs.length > 2) {      alert('alert');    }  };    correctinputs.foreach(input => input.addeventlistener('click', alertifthree));

<input type="checkbox" name="correct"/>  <input type="checkbox" name="correct"/>  <input type="checkbox" name="correct"/>  <input type="checkbox" name="correct"/>  <input type="checkbox" name="correct"/>

• document.queryselectorall('input[name="correct"]') gets inputs name "correct".
• [...code] spread operator, converts code previous point array.
• correctinputs.foreach(input => input.addeventlistener('click', alertifthree)) adds click event listener each of them. event listener function alertifthree().
• alertifthree() filters out input elements not checked , produces alert if there more 2 of them.

edit

in response comment:

// jshint esnext: true    const inputs = [...document.queryselectorall('input[name="correct"], input[name="incorrect"]')];    const alertifcorrect = () => {    const checkedinputs            = inputs.filter(input => input.checked),          noincorrectcheckedinputs = checkedinputs.find(input => input.name === 'incorrect') === undefined;    if (checkedinputs.length > 2 && noincorrectcheckedinputs) {      alert('alert');    }  };    inputs.foreach(input => input.addeventlistener('click', alertifcorrect));

<p>correct:    <input type="checkbox" name="correct"/>    <input type="checkbox" name="correct"/>    <input type="checkbox" name="correct"/>    <input type="checkbox" name="correct"/>    <input type="checkbox" name="correct"/>  </p>  <p>incorrect:    <input type="checkbox" name="incorrect"/>    <input type="checkbox" name="incorrect"/>    <input type="checkbox" name="incorrect"/>  </p>

• const es6 constant. "the value of constant cannot change through re-assignment, , can't redeclared".
• [...code_here] called spread syntax. here, turns contains after ellipsis array. other way use array.from().
• () => { , input => code_here arrow functions. es6's syntactic sugar function declaration.
  
  stands before => parameters. () stands 0 parameters. if wanted function takes few parameters, braces need have few parameters inside them. 1 parameter, parameter's name can replace braces altogether (like in second code in bullet point).
  
  stands after => either expression or group of statements. statements surrounded curly brackets ({}). if omit them, writing expression function return. example input => input.checked equivalent function(input) { return input.checked; }.
• filter() , find() methods of array prototype. respectively filter , search array using condition defined in function passed them parameter. read more following 2 links.

if need else explained, let me know. functions , structures here pretty... fresh, can not know them yet.