Checking out checkbox

Question

Good afternoon.

I need some help. I’m creating an Html5 form for my college work. I need to check if at least 1 checkbox item is marked so that it is possible to send the data.

I tried using if and did not succeed, the same happened with trying to use for.

I am using pure JS for validation.

<div class="campo">
                <label>Áreas de interesse</label>
                <label>
                    <input type="checkbox" name="interesse" value="sim"> Análise
                </label>
                <label>
                    <input type="checkbox" name="interesse" value="sim"> Banco de dados
                </label>
                <label>
                    <input type="checkbox" name="interesse" value="sim"> Desenvolvimento
                </label>
                <label>
                    <input type="checkbox" name="interesse" value="sim"> Redes de computadores
                </label>
                <label>
                    <input type="checkbox" name="interesse" value="sim"> Engenharia de Software
                </label>
            </div>

Script I tried:

for

In this case it only sends the data if all the options are checked.

for (var i=0;i<interesse.length;i++) { 
                if (interesse[i].checked == true) { 
                    vInteresse = true;
                }  
                else {
                    alert("Escolha pelo menos uma área de interesse!");
                    event.preventDefault();
                    document.getElementsByName('interesse').focus();
                    return false;
                }
            }

The if Else, tried with each checkbox a different name, I did basically like this:

In that case any option I’d set would give Else’s message.

if (analise==true || dba==true || dev==true || redes==true || engineer==true) {
  vInteresse = true;
} else {
  alert("Escolha pelo menos uma área de interesse!");
  event.preventDefault();
  document.getElementsByName('interesse').focus();
  return false;
}

Answer 1

can try something like:

      function validaCheckboxes() {
        const checkboxes = document.querySelectorAll("input[name='interesse'");
        let valid = false;
        checkboxes.forEach(check => {
          if (check.checked) {
            valid = true;
          }   
        }); 
        alert(valid ? 'Valido' : 'Invalid');
      } 

This function will search for all inputs as name="interesse" and analyze whether the property checked of them is true, and will give you a alert saying if any the condition Voce described this validates or not. Basing on this function only treat the result as you want :)