Radio Buttons
 No Quiz
 We’ll have 3 next class
 1 for the midterm day
 1 for today
 1 for next class
 Go over the Midterm
 Extra credit opportunity
 Radio Buttons
 Check boxes
2
 It’s yours – keep it!
 I like to take difficult midterm questions and use them on the final
 We’ll go over the content of the exam now
 Please ask “why is this wrong?” and/or “what is a correct answer?”
 Hold questions about your individual grades until you can talk to me
1-on-1
3
 Questions 7, 8, 9 were a bit rough
 Enough people did poorly that it’s worth incentivizing people to study up on it
 (Also, Questions 7 + 8 were new, and could have been more clear)
 AT SOME POINT I’m going to give y’all a surprise “quiz” on those topics
 The surprise quiz will be worth 10-15-ish points
 The points will be added directly to your quarterly total
 So if you missed these on the midterm they can replace those lost points
 If you got these points on the midterm then they’ll be purely extra credit
 Surprise quiz  You will need to study this consistently to be ready
4
Radio buttons
5
 Image from: https://en.wikipedia.org/wiki/Radio_button
 HTML:
 We're NOT going to use id here
 (we can't have duplicates id's)
 Instead, we're going to give all the individual HTML elements the same name
 (name attribute allows for duplicates)
 We need to define the text separately
 "Cat", "Dog", and "Turtle" in the above image
 FILE: radio_buttons_demo.html
6
7
<h2>Radio Buttons</h2>
<form>
<h3>How much does BIT 116 rock?</h3>
<p>
<input type="radio" name="enthusiasm" value="High">Totally A Ton!!!!<br/>
Text before button <input type="radio" name="enthusiasm" value="SoSo"> It's Ok <!-- since there's no br,
there's no line break -->
<input type="radio" name="enthusiasm" value="Low">Why, God, why did I sign up for this class?<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>
 <input = Start of the button itself. Note that there's no closing tag. This element puts ONLY the button




on the page
type="radio" = Tells the browser to put a radio button on the page
name="enthusiasm" = We picked enthusiasm. Pick any valid name you want, but be consistent
value="High"> = Again, pick anything you want (we picked High). Each button needs to have a
unique value. For the others we picked SoSo and Low.
Totally A Ton!!!!<br/> = Notice that the text is outside the button and unconnected to it
8
$("#getFeedback").click( function() {
var whichOne = $('input:radio[name=enthusiasm]:checked').val();
// First, what do we get:
//
>>> is added so it's clear what the var is, even if it's empty/blank
alert(">>>" + whichOne + "<<<");
 $('input = We're going to start by asking for all the 'input elements, and then filtering out the ones
we're not interested in
 :radio = Ignore (filter out) anything who's type is not radio
 (as specified using the type="radio" attribute in the HTML – see previous slide)
 [name=enthusiasm] = Amongst the radio buttons, only look at those elements who have a name
attribute and that name attribute is 'enthusiasm'
 :checked') = Amongst the radio inputs named 'enthusiasm', select the one that is checked (if any)
 .val(); = Finally, get the value from that button. The value will be either High, SoSo, or Low (as
specified using the value="…"> attribute in the HTML – see previous slide)
9
$("#getFeedback").click( function() {
var whichOne = $('input:radio[name=enthusiasm]:checked').val();
// First, what do we get:
//
>>> is added so it's clear what the var is, even if it's empty/blank
alert(">>>" + whichOne + "<<<");
 We're going to start off by simply showing the value of the radio button
10
$("#getFeedback").click( function() {
var whichOne = $('input:radio[name=enthusiasm]:checked').val();
// <snip> - to fit everything on one slide 
if( whichOne === undefined )
$("#msgHere").html( "You need to make a choice!");
else if( whichOne === "High" )
$("#msgHere").html( "Great! I'm glad that you're enjoying the course");
else if( whichOne === "SoSo" )
$("#msgHere").html( "That's too bad. What can I do to help?");
else if( whichOne === "Low" )
$("#msgHere").html( "That's definitely too bad! Please talk to the prof to get some help ASAP!! :( :( :(");
else
$("#msgHere").html( "INTERNAL ERROR: We should never execute this line of
code!!");
});
 if( whichOne === undefined ) = check if the user didn't select anything
 NOTE: there's no quotes around the undefined !!!
 if( whichOne === "High" ) = Otherwise look for the text that we specified in the HTML
 else = We shouldn't need this, but it's better to be safe than sorry
11
 Work on Exercise #1 for the 'radio buttons' section of this lecture
12