Scripting Check Boxes 2 Check boxes Check boxes Image from https enwikipediaorgwikiCheckbox HTML Each box gets its own id Note that the text is defined separately Checked Tristate Indeterminate and Unchecked in the above image ID: 460748
Download Presentation The PPT/PDF document "BIT116" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
BIT116: Scripting
Check Boxes Slide2
2
Check boxesSlide3
Check boxes
Image from: https://en.wikipedia.org/wiki/Checkbox HTML:Each box gets it's own idNote that the text is defined separately"Checked", "Tristate / Indeterminate", and "Unchecked" in the above imageFILE:
checkboxes_simple_demo.html
3Slide4
What the page looks like:
4Slide5
<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="cbStudy" type="checkbox" checked> Studied Some More<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 consistenttype="checkbox" = Tells the browser to put a check box (but NOT text) on the pagevalue="Slept" = Again, pick anything you want (we picked Slept). We'll check for this value in the JavaScript once the button is clickedchecked="checked"> = Tell the browser that this box should start off checked. We can just write checked if we'd preferSlept Some<br/> = Notice that the text is outside the button and unconnected to it
5Slide6
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 otherwise6Slide7
The overall approach
Start with the text at the beginning of the sentenceFor each checkbox:If it's checked then add that box's text to the existing textIf we didn't check off anything then replace all the text with a different messageOtherwise 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
7Slide8
$("#
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( $('#
cbStudy').is(':checked') ) feedback = feedback + ", studied"; 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 feedback8Slide9
$("#
getFeedback").click( function() { var startingText
= "I'm glad that you ";
var
feedback =
startingText
;
i
f( $('#
checkboxSlept
').is(':checked') )
feedback = feedback + " slept";
if( $('#
checkboxHW').is(':checked') ) feedback = feedback + ", studied"; if( $('#cbStudy').is(':checked') ) feedback = feedback + ", studied"; 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 feedback9Slide10
$("#
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( $('#cbStudy').is(':checked') ) feedback = feedback + ", studied"; 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";10Slide11
$("#
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 anything11Slide12
$("#
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 insteadelse = otherwise…feedback = feedback + " this weekend."; = add 'this weekend." to the end of our feedback12Slide13
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 there13