Check Boxes

2 Check boxes

 Image from:  HTML:  Each box gets it's own id  Note that the text is defined separately  "Checked", "Tristate / Indeterminate", and "Unchecked" in the above image  FILE: checkboxes_simple_demo.html 3

4

Check boxes What did you do this past weekend? Slept Some Worked on my homework Ate Some Food Experienced a Deep, Existential Dread At The Approaching Week Some Fascinating Text! That I will change! With jQuery!  <input = Start of the checkbox itself. Note that there's no closing tag. This element puts ONLY the check box on the page, not the text that goes next to it.  id="checkboxSlept" = We picked checkboxSlept. Pick any valid name you want, but be consistent  type="checkbox" = Tells the browser to put a check box (but NOT text) on the page  value="Slept" = Again, pick anything you want (we picked Slept). We'll check for this value in the JavaScript once the button is clicked  checked="checked"> = Tell the browser that this box should start off checked. We can just write checked if we'd prefer  Slept Some = Notice that the text is outside the button and unconnected to it 5

if( $('#checkboxSlept').is( ':checked' ) ) feedback = feedback + " slept";  $('#checkboxSlept = What's nice is that we can go back to asking for a particular checkbox by ID .is() = Ask if the selected element(s) have a particular attribute, etc  ':checked' = Specifically, is the checkbox checked?  This will return true if the box is checked off, and will return false otherwise 6

 Start with the text at the beginning of the sentence  For each checkbox:  If it's checked then add that box's text to the existing text  If we didn't check off anything then replace all the text with a different message  Otherwise we'd get the beginning and the end glued together: "I'm glad that you this weekend"  Then, of course, place that text on the page 7

$("#getFeedback").click( function() { var startingText = "I'm glad that you "; var feedback = startingText; if( $('#checkboxSlept').is(':checked') ) feedback = feedback + " slept"; if( $('#checkboxHW').is(':checked') ) feedback = feedback + ", studied"; if( $('#cbAte').is(':checked') ) feedback = feedback + ", ate"; if( $('#cbDread').is(':checked') ) feedback = feedback + ", and dreaded"; if( feedback == startingText) // if no options were chosen feedback = "Wait - you didn't eat or sleep this weekend? Or study? Or dread?"; else feedback = feedback + " this weekend."; $("#msgHere").html( feedback ); }); var startingText = "I'm glad that you "; = This is the beginning of the sentence. We'll want to use it again later… var feedback = startingText; = so we're making a copy of it in feedback. We'll add things onto feedback 8

$("#getFeedback").click( function() { var startingText = "I'm glad that you "; var feedback = startingText; if( $('#checkboxSlept').is(':checked') ) feedback = feedback + " slept"; if( $('#checkboxHW').is(':checked') ) feedback = feedback + ", studied"; if( $('#cbAte').is(':checked') ) feedback = feedback + ", ate"; if( $('#cbDread').is(':checked') ) feedback = feedback + ", and dreaded"; if( feedback == startingText) // if no options were chosen feedback = "Wait - you didn't eat or sleep this weekend? Or study? Or dread?"; else feedback = feedback + " this weekend."; $("#msgHere").html( feedback ); }); if( $('#checkboxSlept').is(':checked') ) = if the 'checkboxSlept' check box is checked…. feedback = feedback + " slept"; = then glue (concatenate) the text " slept" onto our feedback 9

$("#getFeedback").click( function() { var startingText = "I'm glad that you "; var feedback = startingText; if( $('#checkboxSlept').is(':checked') ) feedback = feedback + " slept"; if( $('#checkboxHW').is(':checked') ) feedback = feedback + ", studied"; if( $('#cbAte').is(':checked') ) feedback = feedback + ", ate"; if( $('#cbDread').is(':checked') ) feedback = feedback + ", and dreaded"; if( feedback == startingText) // if no options were chosen feedback = "Wait - you didn't eat or sleep this weekend? Or study? Or dread?"; else feedback = feedback + " this weekend."; $("#msgHere").html( feedback ); }); if( $('#checkboxHW').is(':checked') ) = Similarly (and independently) add ", studied" if the user studied feedback = feedback + ", studied"; 10

$("#getFeedback").click( function() { var startingText = "I'm glad that you "; var feedback = startingText; if( $('#checkboxSlept').is(':checked') ) feedback = feedback + " slept"; // - to fit everything on one slide if( feedback == startingText) // if no options were chosen feedback = "Wait - you didn't eat or sleep this weekend? Or study? Or dread?"; else feedback = feedback + " this weekend."; $("#msgHere").html( feedback ); }); if( feedback == startingText) = if the user didn't check anything, then feedback will be the same as the original, starting text. In other words – this will check if the user didn't check off anything 11

$("#getFeedback").click( function() { var startingText = "I'm glad that you "; var feedback = startingText; if( $('#checkboxSlept').is(':checked') ) feedback = feedback + " slept"; // - to fit everything on one slide if( feedback == startingText) // if no options were chosen feedback = "Wait - you didn't eat or sleep this weekend? Or study? Or dread?"; else feedback = feedback + " this weekend."; $("#msgHere").html( feedback ); }); feedback = "Wait - you didn't eat …"; = if the user didn't pick anything then use this message instead else = otherwise… feedback = feedback + " this weekend."; = add 'this weekend." to the end of our feedback 12

 Work on exercise #1 in the ICEs for 'checkboxes'  Note that this may be on a separate page than the 'radio buttons' exercise.  Go back to the main page for the course and find the ICEs there 13