添加列表項目和checboxes的值

Question

嘗試從複選框和項目列表中添加值以製作價格計算器。客戶從項目列表或複選框中選擇他們想要的服務類型，價格計算器給出價格報價。

$(".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

首先，把一個鏈接到jQuery腳本在你的頭，你的其它腳本標籤上面：

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

然後使用jQuery中的.change（）函數，然後加起來所有的選項：選中並輸入。選項：選中。

<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> 

演示在這裏：http://jsfiddle.net/vZwFx/

如果你希望你的「總」 div來代替更新警報的彈出，只需用$("#total").text("£" + total);