0

チェックボックスとアイテムリストから値を追加して、価格計算機を作成してみてください。クライアントがアイテムリストまたはチェックボックスから必要なサービスのタイプを選択し、価格計算機が価格の見積もりを提供します。

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

1 に答える 1

0

まず、jquery スクリプトへのリンクをヘッダーの他のスクリプト タグの上に配置します。

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

次に、jquery で .change() 関数を使用し、すべての option: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);

于 2012-10-30T18:16:55.623 に答える