Earn a pay check every two weeks Car Salesmen sell 10 cars and gets a $1000 bonus. Gambling
Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.
-
Upload
bertram-lane -
Category
Documents
-
view
214 -
download
0
description
Transcript of Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.
![Page 1: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/1.jpg)
BIT116: Scripting
Check Boxes
![Page 2: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/2.jpg)
2
Check boxes
![Page 3: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/3.jpg)
3
Check boxes 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
![Page 4: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/4.jpg)
4
What the page looks like:
![Page 5: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/5.jpg)
5
<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
![Page 6: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/6.jpg)
6
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
![Page 7: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/7.jpg)
7
The overall approach 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
![Page 8: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/8.jpg)
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 );
});
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
![Page 9: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/9.jpg)
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( $('#checkboxSlept').is(':checked') ) = if the 'checkboxSlept' check box is checked….
feedback = feedback + " slept"; = then glue (concatenate) the text " slept" onto our feedback
![Page 10: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/10.jpg)
10
$("#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";
![Page 11: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/11.jpg)
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 );
});
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
![Page 12: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/12.jpg)
12
$("#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?";
elsefeedback = 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
![Page 13: Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own.](https://reader036.fdocuments.us/reader036/viewer/2022081605/5a4d1bc47f8b9ab0599d42a6/html5/thumbnails/13.jpg)
13
Do exercises 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