Home / Questions / 167899
Accepted
Ricardo Sauceda
Asked: 2020-05-26 13:19:59 +0800 CST 2020-05-26 13:19:59 +0800 CST

Validate if one or more checkboxes are selected in Javascript

  • 772

Sometimes we are asked in an HTML form to list the characteristics of an element in 1 on checkboxes . Example:

Select 1 with areas of interest for your job application.

Then we must obtain the C/U ID of the areas of interest that you select and validate if at least 1 checkbox has been selected.

How do I do it?

javascript

2 Answers

  1. Best Answer

    So to solve this problem I did the following:

    These checkboxes are ready dynamically. I get everything directly from the database.

    In my form I have:

    <div class="w-row">
   <% for (int i = 0; i < areaInteresModel.length; i++) {
      CatAreaInteresModel areaInteres = CatAreaInteresModel[i];
   %> 
   <div class="w-col w-col-3">
        <div class="w-form">
             <input type="checkbox" id="<%=areaInteres.getcAreaInteresId()%>" data-name="checkbox" name="checkbox"  value="<%=areaInteres.getcAreaInteresId()%>" > <%=areaInteres.getcAreaInteresNombre()%>                                     
        </div>
   </div>
   <%}%>

    And in Javascript

    var check_interes = form_t.checkbox_t; //Array que contiene los checkbox
    var cont_t = 0; //Variable que lleva la cuenta de los checkbox pulsados    
    for (var x = 0; x < check_interes.length; x++) {
        if (check_interes[x].checked) {
            cont_t = cont_t + 1;
        }
    }

if (cont_t == 0) {
    //SINO HA SELECCIONADO
    alert("ERROR");
    return false;
} else if (cont_t > 5) {
    //SINO HA SELECCIONADO MAS DE (5 o N) OPCIONES DISPONIBLES.
    alert("ERROR");
    return false;
} 


var interes = document.forms[2];
var area_interes = "";
var i;
for (i = 0; i < interes.length; i++) {
    if (interes[i].checked) {
        //OBTENEMOS UN STRING CON TODOS LOS ID DE NUESTRO CHECKBOX
        area_interes = area_interes + interes[i].value + ",";
    }
}

    I hope it serves you, helps you and I hope to be brief and concise with my contribution. If not, suggest a better solution, cheers!

    • 1

  2. this could work

    //this es el formulario
let checked = this.querySelectorAll('input[type=checkbox]:checked');
if (checked.length == 0) {
    //SINO HA SELECCIONADO
    alert("ERROR");
    return false;
} else if (checked.length > 5) {
    //SINO HA SELECCIONADO MAS DE (5 o N) OPCIONES DISPONIBLES.
    alert("ERROR");
    return false;
} 

let area_interes = "";
for (let i = 0, length = checked.length; i < length; i++) {
    area_interes += checked[i].value + ",";             
}
    • 1