Lesson Thursday

We've learned how to use a variety of HTML form inputs with jQuery. We held off on learning about checkboxes because we needed to learn about arrays first. Now that we have a basic understanding of arrays, let's learn how to use checkboxes with arrays and jQuery.

Transportation Survey

In this lesson, we'll build a small website that contains a survey. Our survey will ask users which methods of transportation they have used to travel to work or school in the past year. For now, the site will simply display a user's responses back to them after the form has been submitted.

Checkboxes differ from radio buttons because they allow multiple options to be selected at once while radio buttons are for selecting a single option. Since many people have likely used more than one mode of transportation in the past year, we'll use checkboxes to collect our survey answers. This will allow users to select all answers that apply to them.

Here's the HTML for our form:

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>

We've already linked Bootstrap, a custom stylesheet, jQuery, and a scripts.js file in the <head> tag. (Note that you'll need to download jQuery and Bootstrap on your own - and update the file names or the links above so the files are properly linked to your HTML.) Additionally, we've included a <span> below the form with the id work-responses. This will eventually hold our user's responses to our question. When the user first visits our page, the span is hidden with CSS:

transportation_survey/css/styles.css
#work-responses {
  display: none;
}

When the form is submitted, we'll show this span and append the user's responses to it using jQuery. This is the same general process we used to display information in our previous lesson on forms.

Retrieving Checkbox Values with jQuery

In order to determine which checkboxes the user has selected, we can fetch the form data in our user interface logic like this:

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();
  });
});

Here, we attach a .submit() listener to our form. When the form is submitted, we'll display our work_responses <span>. Don't forget we'll need event.preventDefault() - otherwise the page will be reloaded and all the information a user submits will be lost.

Next, we use the jQuery selector$("input:checkbox[name=work-transportation]:checked") to target all checkboxes the user has selected. This is a much longer selector than we've previously used. Let's break it down:

  • 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.

Ultimately, this selector targets all checkbox inputs with the name attribute work-transportation that the user has checked. That's exactly what we want!

Let's take a look at what jQuery captures when we select several checkboxes. Navigate to index.html in the browser and select the first four items. Next, go to the Sources tab and insert a breakpoint after the submit() function. Now submit the form. If we go to the Console tab, we can see exactly what the selector is grabbing by typing the jQuery selector in the console to see its value. For instance, here are the values of each selector:

In the console, we can see the values of each item in the jQuery array.

First, we type in the value of $("input:checkbox[name=work-transportation]:checked") and see what's checked. We'll see that it contains an array that has 4 input elements. (There is also a prevObject property. Do not worry about this - it's just jQuery's way of providing access to the previous object, which includes information about the DOM itself.)

We can use bracket notation to look at the value of each checked box - for instance, the value of $("input:checkbox[name=work-transportation]:checked")[2] is <input type="checkbox" name="work-transportation" value="carpool">. We know how to grab values from inputs like this - using jQuery's .val() method.

So as we can see, $("input:checkbox[name=work-transportation]:checked") returns the inputs of the checked boxes inside an array. All we need to do is iterate over that array with a loop.

We can use jQuery's .each() method to do this. .each() works very similarly to Array.prototype.forEach(). The key difference is that it's a jQuery method that specifically iterates over selectors.

Inside the .each() loop, we determine the value of the current element by calling $(this).val();. In this case, this refers to the current checked box that's being assessed. We call .val() to retrieve the "value" attribute from that checkbox's HTML. We assign this value to the variable workTransportationMode. Then, we then append this information (and a <br>) to our work-responses span.

We can select a few modes of transportation and hit submit:

one-question-checkboxes

And look! It's successfully returning the exact combination of checkboxes we selected when answering our survey question:

one-question-checkboxes-results

Multiple Sets of Checkboxes

Let's say we want to expand our survey to contain two questions. One question will ask how people travel to work or school while the second ask how people travel to other events or activities outside of work or school. We want data for each question to come back separately. To achieve this, we would add another set of checkbox inputs that share a different name value:

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>
      <div class="form-group">
        <p>In the past year, I have used the following modes of transportation to travel to other activities and events:</p>
        <input type="checkbox" name="fun-transportation" value="bike"> Riding a bike.<br>
        <input type="checkbox" name="fun-transportation" value="car">Driving a car.<br>
        <input type="checkbox" name="fun-transportation" value="carpool">Carpooling with others.<br>
        <input type="checkbox" name="fun-transportation" value="walk">Walking.<br>
        <input type="checkbox" name="fun-transportation" value="bus">Riding the bus.<br>
        <input type="checkbox" name="fun-transportation" value="train">Riding the train.<br>
        <input type="checkbox" name="fun-transportation" value="streetcar">Riding the streetcar.<br>
        <input type="checkbox" name="fun-transportation" value="taxi">Taking a taxi.<br>
        <input type="checkbox" name="fun-transportation" value="rideshare">Using a rideshare service like Lyft or Uber.<br>
        <input type="checkbox" name="fun-transportation" value="skateboard">Skateboarding.<br>
        <input type="checkbox" name="fun-transportation" value="rollerblade">Rollerblading.<br>
        <input type="checkbox" name="fun-transportation" value="scooter">Riding a scooter.<br>
        <input type="checkbox" name="fun-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>
    <br>
    <span id="fun-responses">
      <p><b>You use the following methods of transportation to travel to other activities and events:</b></p>
    </span>
  </div>
</body>
</html>

As you can see, the second set of checkboxes all share a fun-transportation name attribute. We've also added an additional <span> to eventually contain the user's responses to this second question. This span is also hidden by CSS, and will be displayed after the form is submitted:

transportation_survey/css/styles.css
#work-responses {
  display: none;
}

#fun-responses {
  display: none;
}

We can gather answers to this question similar to the manner we gathered answers for the first. We add a second loop that targets "input:checkbox[name=fun-transportation]:checked". That is, all checkbox input fields with the name attribute of fun-transportation that are currently checked:

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>");
    });
    $("#fun-responses").show();
    $("input:checkbox[name=fun-transportation]:checked").each(function(){
      const funTransportationMode = $(this).val();
      $('#fun-responses').append(funTransportationMode + "<br>");
    });
    $('#transportation_survey').hide();
  });
});

Again, we show the <span> with the id of fun-responses, cycle through each currently-selected checkbox with the name attribute of fun-responses, collect its value, and append it to our span.

We can try this out, too. Let's select a few answers from each of the two questions:

selecting-checkboxes-multiple-questions

After submitting the form we should see each mode of transportation we selected for each question appear on the page:

selecting-checkboxes-multiple-questions-results

Other Uses for Checkbox Data

We can do many things with data we collect from checked boxes. For instance, we could save the values of checked boxes in an array called userResponses:

...
  let userResponses = [];
  $("input:checkbox[name=work-transportation]:checked").each(function(){
      const workTransportationMode = $(this).val();
      userResponses.push(workTransportationMode);
    });
...

Or we could manipulate this data in whatever fashion we please:

...
  $("input:checkbox[name=work-transportation]:checked").each(function(){
      const workTransportationMode = $(this).val();
      const capitalWorkTransportationMode = workTransportationMode.toUpperCase();
      ...
    });
...

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>

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();
  });
});

  • 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.

Lesson 15 of 16
Last updated September 13, 2020