Lecture Slides: Check boxes
advertisement
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
