Gathering Data with Checkboxes
Tags: javascript, codenewbie, jquery, checkboxes
Published: 2021-02-03 04:47:35

# Gathering Data with Checkboxes

# **Examples**

---

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

**transportation_survey/index.html**

```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**

```jsx

$(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.