Session 09 - JavaScript, Part 2
Examples

• Example 9.1 - Separation from Markup  
  <form method="get" name="ice_cream" id="ice_cream" action="http://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div> Would you like ice cream?<br/><input type="radio" name="want" id="ic_yes" value="yes"/><label for="ic_yes">Yes</label><br/><input type="radio" name="want" id="ic_no" value="no"/><label for="ic_no">No</label></div><fieldset id="icecream_options"><legend>Ice Cream Options</legend><p>How would you like it?</p><input type="radio" id="container_cup" name="container" value="cup"/><label for="container_cup">Cup</label><br/><input type="radio" id="container_cone" name="container" value="cone"/><label for="container_cone">Cone</label><br/><p>Pick your toppings:</p><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/><label for="toppings_wc">Whipped cream</label><br/><input type="checkbox" name="toppings" id="toppings_j" value="jimmies"/><label for="toppings_j">Jimmies</label><br/><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/><label for="toppings_nuts">Nuts</label><br/><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/><label for="toppings_cherry">Cherry</label></fieldset><p><input type="submit"/></p></form>#icecream_options { background-color: #eee; margin-left: 2em; }$(document).ready(function(){ $("#icecream_options").hide(); $("input[name='want']").click(function(){ displayIceCreamOptions(); }); }); function displayIceCreamOptions() { if ($("input[name='want']:checked").val() == 'yes') { $('#icecream_options').fadeIn('slow'); } else { $('#icecream_options').fadeOut('slow'); } }
• Example 9.2 - Check/Uncheck all  
  <form action="http://cscie12.dce.harvard.edu/echo" method="get" enctype="application/x-www-form-urlencoded"><h3>How did you hear about us?</h3><p>[<a href="#" id="checkall">check all</a>] [<a href="#" id="uncheckall">uncheck all</a>] [<a href="#" id="togglecheckboxes">toggle</a>] </p><ul style="list-style: none;"><li><input type="checkbox" name="how" value="radio"/>Radio</li><li><input type="checkbox" name="how" value="newspaper"/>Newspaper</li><li><input type="checkbox" name="how" value="magazine"/>Magazine</li><li><input type="checkbox" name="how" value="online"/>Online</li><li><input type="checkbox" name="how" value="friend"/>Friend</li></ul><input type="submit"/></form>$(document).ready(function() { console.log($('#input[name="how"]')); $('#checkall').click(function() { $('input[name="how"]').prop('checked',true); console.log('check all!'); }); $('#uncheckall').click(function() { $('input[name="how"]').prop('checked',false); console.log('uncheck all!'); }); $('#togglecheckboxes').click(function() { $('input[name=how]').each(function (i) { if ($(this).is(':checked')) { $(this).prop('checked',false); } else { $(this).prop('checked',true); } }); }); });
• Example 9.3 - Separation from Markup  
  <form method="get" name="ice_cream" id="ice_cream" action="http://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div> Would you like ice cream?<br/><input type="radio" name="want" id="ic_yes" value="yes"/><label for="ic_yes">Yes</label><br/><input type="radio" name="want" id="ic_no" value="no"/><label for="ic_no">No</label></div><fieldset id="icecream_options"><legend>Ice Cream Options</legend><p>How would you like it?</p><input type="radio" id="container_cup" name="container" value="cup"/><label for="container_cup">Cup</label><br/><input type="radio" id="container_cone" name="container" value="cone"/><label for="container_cone">Cone</label><br/><p>Pick your toppings:</p><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/><label for="toppings_wc">Whipped cream</label><br/><input type="checkbox" name="toppings" id="toppings_j" value="jimmies"/><label for="toppings_j">Jimmies</label><br/><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/><label for="toppings_nuts">Nuts</label><br/><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/><label for="toppings_cherry">Cherry</label></fieldset><p><input type="submit"/></p></form>#icecream_options { background-color: #eee; margin-left: 2em; }$(document).ready(function(){ $("#icecream_options").hide(); $("input[name='want']").click(function(){ displayIceCreamOptions(); }); }); function displayIceCreamOptions() { if ($("input[name='want']:checked").val() == 'yes') { $('#icecream_options').fadeIn('slow'); } else { $('#icecream_options').fadeOut('slow'); } }