DEV Community

Cover image for Gathering Data with Checkboxes
Saoud
Saoud

Posted on

Gathering Data with Checkboxes

Gathering Data with Checkboxes

Examples


If we had the following form containing a group of checkboxes:

transportation_survey/index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Transportation Survey</title>
  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/scripts.js"></script>
</head>
<body>
  <div class="container">
    <div class="jumbotron">
      <h2>Transportation Survey</h2>
    </div>
    <form id="transportation_survey">
      <div class="form-group">
        <p>In the past year, I have used the following modes of transportation to travel to work or school:</p>
        <input type="checkbox" name="work-transportation" value="bike"> Riding a bike.<br>
        <input type="checkbox" name="work-transportation" value="car">Driving a car.<br>
        <input type="checkbox" name="work-transportation" value="carpool">Carpooling with others.<br>
        <input type="checkbox" name="work-transportation" value="walk">Walking.<br>
        <input type="checkbox" name="work-transportation" value="bus">Riding the bus.<br>
        <input type="checkbox" name="work-transportation" value="train">Riding the train.<br>
        <input type="checkbox" name="work-transportation" value="streetcar">Riding the streetcar.<br>
        <input type="checkbox" name="work-transportation" value="taxi">Taking a taxi.<br>
        <input type="checkbox" name="work-transportation" value="rideshare">Using a rideshare service like Lyft or Uber.<br>
        <input type="checkbox" name="work-transportation" value="skateboard">Skateboarding.<br>
        <input type="checkbox" name="work-transportation" value="rollerblade">Rollerblading.<br>
        <input type="checkbox" name="work-transportation" value="scooter">Riding a scooter.<br>
        <input type="checkbox" name="work-transportation" value="other">Another mode of transportation not listed here.<br>
      </div>
      <button type="submit">Submit Survey</button>
    </form>
    <span id="work-responses">
      <p><b>You use the following methods of transportation to travel to work or school:</b></p>
    </span>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This jQuery would retrieve all selected checkboxes, and append their values to a span in our HTML:

transportation_survey/js/scripts.js


$(document).ready(function(){
  $("form#transportation_survey").submit(function(event){
    event.preventDefault();
    $("#work-responses").show();
    $("input:checkbox[name=work-transportation]:checked").each(function(){
      const workTransportationMode = $(this).val();
      $('#work-responses').append(workTransportationMode + "<br>");
    });
    $('#transportation_survey').hide();
  });
});

Enter fullscreen mode Exit fullscreen mode
  • The input:checkbox portion of this selector targets <input> fields of the type checkbox.
  • [name=work-transportation] further narrows our search. In addition to targeting only <input> fields of the checkbox type, the name attribute of the field must also be work-transportation.
  • The :checked portion narrows it down even further. In addition to targeting only <input> fields of the checkbox type with a name attribute of work-transportation, we only want to retrieve checked checkboxes that meet these requirements.

Top comments (0)