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)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!