Gathering Data with Checkboxes
Examples
If we had the following form containing a group of checkboxes:
transportation_survey/index.html
<!DOCTYPE html><htmllang="en-US"><head><title>Transportation Survey</title><linkhref="css/bootstrap.css"rel="stylesheet"type="text/css"><linkhref="css/styles.css"rel="stylesheet"type="text/css"><scriptsrc="js/jquery-3.5.1.js"></script><scriptsrc="js/scripts.js"></script></head><body><divclass="container"><divclass="jumbotron"><h2>Transportation Survey</h2></div><formid="transportation_survey"><divclass="form-group"><p>In the past year, I have used the following modes of transportation to travel to work or school:</p><inputtype="checkbox"name="work-transportation"value="bike"> Riding a bike.<br><inputtype="checkbox"name="work-transportation"value="car">Driving a car.<br><inputtype="checkbox"name="work-transportation"value="carpool">Carpooling with others.<br><inputtype="checkbox"name="work-transportation"value="walk">Walking.<br><inputtype="checkbox"name="work-transportation"value="bus">Riding the bus.<br><inputtype="checkbox"name="work-transportation"value="train">Riding the train.<br><inputtype="checkbox"name="work-transportation"value="streetcar">Riding the streetcar.<br><inputtype="checkbox"name="work-transportation"value="taxi">Taking a taxi.<br><inputtype="checkbox"name="work-transportation"value="rideshare">Using a rideshare service like Lyft or Uber.<br><inputtype="checkbox"name="work-transportation"value="skateboard">Skateboarding.<br><inputtype="checkbox"name="work-transportation"value="rollerblade">Rollerblading.<br><inputtype="checkbox"name="work-transportation"value="scooter">Riding a scooter.<br><inputtype="checkbox"name="work-transportation"value="other">Another mode of transportation not listed here.<br></div><buttontype="submit">Submit Survey</button></form><spanid="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(){constworkTransportationMode=$(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)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
