Check Boxes Check boxes 2 Image from: https://en.wikipedia.org/wiki/Checkbox 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 <body><h2>Check boxes</h2> <form><h3>What did you do this past weekend?</h3> <p> <input id="checkboxSlept" type="checkbox" value="Slept" checked="checked">Slept Some<br/> <input id="cbHW" type="checkbox"> Worked on my homework<br/> <input id="cbAte" type="checkbox" checked> Ate Some Food<br/> <input id="cbDread" type="checkbox"> Experienced a Deep, Existential Dread At The Approaching Week<br/> <input type="button" id="getFeedback" value="Click here for feedback!"> </p> </form> <p id="msgHere">Some Fascinating Text! That I will change! With jQuery!</p></body></html> <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<br/> = 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"; // <snip> - 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"; // <snip> - 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