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（）函数，然后添加所有选项：selected和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>

在这里演示：http://jsfiddle.net/vZwFx/

如果您希望更新“总计”div而不是弹出警报，只需将警报调用替换为$("#total").text("£" + total);

从列表项和复选框中添加值

1 个答案: