FLEX B

by Brent Coder

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<form>

  <DIV id="Internet">
    Internet
    <HR>
    <span>
<input id="Radio1" name="internetspeed" type="radio" value="0" checked="checked">
<label for="Radio1">Internet 50</label>
</span>

    <span>
<input id="Radio2" name="internetspeed" type="radio" value="1" >
<label for="Radio2">Internet 100</label>
</span>

    <span>
<input id="Radio3" name="internetspeed" type="radio" value="2" >
<label for="Radio3">Internet 150</label>
</span>
    <hr>
    <span>
<input id="internetusagecheck" name="internetusage" type="checkbox" value="0">
<label for="internetusagecheck">Unlimited Usage</label>
</span>
  </DIV>




  <DIV id="TV">
    <HR> TV
    <HR>
    <span>
<input id="tv1" name="tvpackage" type="radio" value="0" checked="checked">
<label for="tv1">Basic TV</label>
</span>

    <span>
<input id="tv2" name="tvpackage" type="radio" value="1" >
<label for="tv2">Value Pack 1</label>
</span>

    <span>
<input id="tv3" name="tvpackage" type="radio" value="2" >
<label for="tv3">Value Pack 2</label>
</span>


    <hr>
    <span>
<input id="theme1" name="theme" type="checkbox" value="Theme 1">
<label for="theme1">Theme 1 ($1)</label>
<input id="theme2" name="theme" type="checkbox" value="Theme 2">
<label for="theme2">Theme 2 ($2)</label>
<input id="theme3" name="theme" type="checkbox" value="Theme 3">
<label for="theme3">Theme 3 ($3)</label>
<input id="theme4" name="theme" type="checkbox" value="Theme 4">
<label for="theme4">Theme 4 ($4)</label>
<input id="theme5" name="theme" type="checkbox" value="Theme 5">
<label for="theme5">Theme 5 ($5)</label>
</span>
    <hr>

    <span>
<input id="tvhw1" name="tvhardware" type="radio" value="0" checked="checked">
<label for="tvhw1">HD Receiver ($0)</label>
</span>

    <span>
<input id="tvhw2" name="tvhardware" type="radio" value="1" >
<label for="tvhw2">HD DVR ($14.95)</label>
</span>



    <span>
<input id="tvhw3" name="tvhardware"...

CSS

body {
   margin: 2em;
   font-family: Arial, Helvetica, sans-serif;
 }
 
 span {
   /* style this span element so we can display nicely, this stlying is not neccessary */
   margin: 10px 0;
   display: block;
   width: 100%;
   float: left;
 }
 
 input[type="radio"],
 input[type="checkbox"] {
   /* hide the inputs */
   opacity: 0;
 }
 /* style your lables/button */
 
 input[type="radio"] + label,
 input[type="checkbox"] + label {
   /* keep pointer so that you get the little hand showing when you are on a button */
   cursor: pointer;
   /* the following are the styles */
   padding: 4px 10px;
   border: 1px solid #ccc;
   background: #efefef;
   color: #aaa;
   border-radius: 3px;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
 }
 
 input[type="radio"]:checked + label,
 input[type="checkbox"]:checked + label {
   /* style for the checked/selected state */
   background: #777;
   border: 1px solid #444;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
   color: white;
 }

JavaScript

$(document).ready(function() {
  var baseprice = 109.95;
  var basepromo = 109.95;
  
  var totalPrice = baseprice;
  var totalPromo = basepromo;
  var WSTDesc = "WS";
  var BasePriceDesc = "";
  //Product Listings

  var Wifi = {
    group: "Internet",
    type: "Wifi",
    name: "Wi-fi",
    price: 0
  }

  var InternetUsageIncluded = {
    group: "Internet",
    type: "Usage",
    name: "Unlimited Usage",
    price: 0
  }

  var InternetUsageNotIncluded = {
    group: "Internet",
    type: "Usage",
    name: "Unlimited Usage",
    price: 10
  }

  var InternetSpeed50 = {
    group: "Internet",
    type: "Speed",
    name: "Internet 50",
    price: 0
  }

  var InternetSpeed100 = {
    group: "Internet",
    type: "Speed",
    name: "Internet 100",
    price: 10
  }

  var InternetSpeed150 = {
    group: "Internet",
    type: "Speed",
    name: "Internet 150",
    price: 20
  }

  var InternetSpeed100Bundle = {
    group: "Internet",
    type: "Speed",
    name: "Internet 100",
    price: 0
  }

  var InternetSpeed150Bundle = {
    group: "Internet",
    type: "Speed",
    name: "Internet 150",
    price: 0
  }

  var TVPackageBasic = {
    group: "TV",
    type: "Package",
    name: "Basic",
    price: 0
  }

  var TVPackageVP1 = {
    group: "TV",
    type: "Package",
    name: "Value Pack 1",
    price: 0
  }

  var TVPackageVP2 = {
    group: "TV",
    type: "Package",
    name: "Value Pack 2",
    price: 0
  }

  var TVTheme1 = {
    group: "TV",
    type: "Theme",
    name: "Theme 1",
    price: 1
  }

  var TVTheme2 = {
    group: "TV",
    type: "Theme",
    name: "Theme 2",
    price: 2
  }

  var TVTheme3 = {
    group: "TV",
    type: "Theme",
    name: "Theme 3",
    price: 3
  }


  var TVTheme4 = {
    group: "TV",
    type: "Theme",
    name: "Theme 4",
    price: 4
  }

  var TVTheme5 = {
    group: "TV",
    type: "Theme",
    name: "Theme 5",
    price: 5
  }

  var HDReceiverIncluded = {
    group: "TV",
    type: "HW",
    name: "HD Receiver...