Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own

BIT116: Scripting

Check Boxes

2

Check boxes

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

https://en.wikipedia.org/wiki/Checkbox

https://en.wikipedia.org/wiki/Checkbox

4

What the page looks like:

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

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

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

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

9


var startingText = "I'm glad that you ";

var feedback = startingText;

if( $('#checkboxSlept').is(':checked') )feedback = feedback + " slept";if( $('#checkboxHW').is(':checked') )


if( $('#cbAte').is(':checked') )






else



});

if( $('#checkboxSlept').is(':checked') ) = if the 'checkboxSlept' check box is checked….

feedback = feedback + " slept"; = then glue (concatenate) the text " slept" onto our feedback

10




if( $('#checkboxSlept').is(':checked') )


if( $('#checkboxHW').is(':checked') )feedback = feedback + ", studied";if( $('#cbAte').is(':checked') )






else



});

if( $('#checkboxHW').is(':checked') ) = Similarly (and independently) add ", studied" if the user studied


11






// <snip> - to fit everything on one slide if( feedback == startingText) // if no options were chosen


else



});

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

12






// <snip> - to fit everything on one slide if( feedback == startingText) // if no options were chosen


elsefeedback = feedback + " this weekend.";


});

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

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

Documents

Check Boxes. 2 Check boxes Image from: //en. HTML: Each box gets it's own