JQuery examples - checkbox, labels

Here is a combination that checks if a checkbox is checked, hides and shows various fields, and changes the label for an input field. Specifically, a user can choose if an address is a foreign address, which will re-label 'City' and remove State and Zip.

Unchecked:






Checked:

JQuery code:

function handleForeign() {
 if ($('#foreignAddr').is(':checked')) {
  $('#foreignAddress').val("Yes");
  $("label[for='city']").text("City/Province/Code");
  $("label[for='state']").hide();
  $('#state').hide();
  $("label[for='zipcode']").hide();
  $('#zipcode').hide();
 } else {
  $('#foreignAddress').val("");
  $("label[for='city']").text("City");
  $("label[for='state']").show();
  $('#state').show();
  $("label[for='zipcode']").show();
  $('#zipcode').show();
 }
}

HTML/JSP code:

 <div class="row">
  <div class="firstcol">
   <label for="foreignAddr" class="strong">Current Address</label>
  </div>
  <div class="col">&nbsp;
   <input name="foreignAddr" id="foreignAddr" type="checkbox" onclick="javascript:handleForeign();" />
   <span class="label">Foreign Address</span>
  </div>
 </div>
 <div class="row">
  <div class="firstcol">
   <label for="adddress">Street Address </label>
  </div>
  <div class="col">
      <input name="adddress" type="text" class="required" id="adddress" size="40" maxlength="128" />
      <label for="apartm">Apt/Suite/Unit </label>
      <input name="apartm" type="text" class="input" id="apartm" size="4" maxlength="10">
  </div>
 </div>
 <div class="row">
  <div class="firstcol">
   <label for="city">City </label>
  </div>
  <div class="col">
   <input name="city" id="city"  type="text" class="required"maxlength="50" />
   <label for="state">State</label>
   <select name="state" id="state" class="required">
    <%@ include file="list_states.html" %>
   </select>
   <label for="zipcode">Zip </label>
   <input name="zipcode" type="text" class="required" id="zipcode" size="5" maxlength="5" />
  </div>
 </div>
 <div class="row">
  <div class="firstcol">
   <span class="label">Country </span>
  </div>
  <div class="col">
   <select name="country" id="country" class="required">
    <%@ include file="list_countries.html" %>
   </select>
  </div>
 </div>

Here is the CSS for the columns:

div.row {
 clear: both;
 margin: 4px 5px 0px 5px;
 min-width: 500px;
 overflow: auto; /* helps with Firefox spacing issue */
}
div.firstcol {
 text-align: right;
 float: left;
 width: 180px;
}
div.col {
 text-align: left;
 float: left;
 width: 420px;
}