Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  h1 {
    font-size: large;
  }
</style>
</head>
<body>
    <h1>What peripherals do you want to add?</h1>
    <form id="peripherals">
        <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
        <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
        <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
        <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
        <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
        <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
      <label for="Cost">Total</label><input type="text" name="Cost" />
    </form>
</body>
</html>
 
$(function() {
  function calculateCost() {
    var ret = 500;
    var $selected = $('input:checked', $peripherals);
​
    $selected.each(function() {
      ret += parseFloat($(this).attr('alt'));
    });
​
    return ret.toFixed(2);
  }
  
  function setCost() {
    $total.attr('value', calculateCost());
  }
  
  var $peripherals = $('#peripherals');
  var $total = $('input[name="Cost"]');
  $('input[type="checkbox"]', $peripherals).on('change', setCost);
​
  setCost();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers