Question

Try to add value from checkboxes and item list to make a price calculator. where client select the type of service they want from item list or checkboxes , and price calculator give the quote for price.

$(".option").click(function() {
var total = 0;
$(".option:checked").each(function() {
    total += parseInt($(this).val(), 10);
});
alert(total);
});


<table width="98%" cellpadding="0" cellspacing="0" summary="Summary Here">
    <thead>
      <tr>
        <th>Basic</th>
        <th>Requirements</th>
      </tr>
    </thead>
    <tbody>
      <tr class="light">
        <td height="31">Number of Pages</td>
        <td><select class="option">
          <option value="50">1</option>
          <option value="100">2</option>
          <option value="200">3</option>
          <option value="250">4</option>
          <option value="400">5-10</option>
          <option value="800">11-20</option>
          <option value="0" selected="selected">0</option>
        </select></td>            
      </tr>
      <tr class="dark">
        <td>Domain Registration</td>
        <td><input class="option" type="checkbox" value="10" />Yes</td>
        </tr>
      <tr class="light">
        <td>Website Hosting</td>
        <td><input class="option" type="checkbox" value="60" />Yes</td>
       </tr>
       <tr class="dark">
       <th>Options Extras</th>
       <td></td>
       </tr>
      <tr class="light">

        <td>Image Gallery Page</td>
        <td><input class="option" type="checkbox" value="100" />Yes</td>
        </tr>
        <tr class="dark">
       <td>Videos</td>
       <td><input class="option" type="checkbox" value="60" />Yes</td>
       </tr>
       <tr class="light">          
        <td>Membership System</td>
        <td><input class="option" type="checkbox" value="100" />Yes</td>
        </tr>
        <tr class="dark">
       <td>Forum</td>
       <td><input class="option" type="checkbox" value="300" />Yes</td>
       <tr class="light">          
        <td>Image Creation</td>
        <td><select class="option">
          <option value="50">5-10</option>
          <option value="100">11-20</option>
          <option value="200">21-30</option>
          <option value="250">31-40</option>
          <option value="400">41-50</option>
          <option value="800">51-100</option>
          <option value="0" selected="selected">0</option>
        </select></td> </td>
        </tr>
        <tr class="dark">
       <td>Standard Mobile Website</td>
       <td><input class="option" type="checkbox" value="300" />Yes</td>
       </tr>
       <tr class="light">          
        <td>Site or Product Search</td>
        <td><input class="option" type="checkbox" value="60" />Yes</td>
        </tr>
        <tr class="dark">
       <td>File Uploads</td>
       <td><input class="option" type="checkbox" value="90" />Yes</td>
       </tr>
    <thead>
      <tr>
        <th></th>
        <th><div id="total">£0</div></th>
      </tr>
    </thead>

    </tbody>
  </table>

Answer 1

First, put a link to the jquery script in your header, above your other script tag:

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

Then use the .change() function in jquery, then add up all option:selected and input.option:checked.

<script type="text/javascript">
  $(document).ready(function() {
    $(".option").change(function() {
      var total = 0;
      $(".option option:selected, input.option:checked").each(function() {
        total += parseInt($(this).val(), 10);
      });
      $("#total").text("£" + total);
    });
  });
</script>

Demo here: http://jsfiddle.net/vZwFx/

If you want your “total” div to be updated instead of an alert popping up, simply replace the alert call with $("#total").text("£" + total);