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>
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:checkboxportion of this selector targets<input>fields of the typecheckbox. -
[name=work-transportation]further narrows our search. In addition to targeting only<input>fields of thecheckboxtype, thenameattribute of the field must also be work-transportation. - The
:checkedportion narrows it down even further. In addition to targeting only<input>fields of thecheckboxtype with anameattribute of work-transportation, we only want to retrieve checked checkboxes that meet these requirements.
Top comments (0)