0

我有一个带有单选按钮和复选框的表单。在每个单选按钮下都有一列与该单选按钮相关的复选框。我正在寻找的是如何隐藏与该单​​选按钮无关的复选框。

我还在表格中建立了一些总计算。选择不同的单选按钮时，我想清除所有CKECK框并纠正总数。

这是我使用引导 cdn 的源代码。您可以复制并粘贴并加载到浏览器中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc Form</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="row">

    <div class="span3" >
      <div style="margin-left:20px; height:200px;" class="well">
         <br />
         <div id="subtotal">Sub-Total:</div>
           <div id="tax">Tax:</div>
           <div id="total">Total:</div><br />

      </div>
    </div>
<form id="quote" class="form-horizontal">   
    <div class="span8">
      <table class="table table-condensed table-hover">
        <thead>
          <tr>
            <th> Options</th>
            <!-- Multiple Radios (inline) -->
            <div class="control-group">
               <label class="control-label"></label>
  <div class="controls">
              <th><label class="radio inline">
      <input name="rad" value="444" onchange="calculateTotal()" checked="checked" type="radio">
                  <strong>1 YR</strong><br />
                  $444 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="1332" onchange="calculateTotal()" checked="unchecked" type="radio">
                  <strong>3 YRS.</strong><br />
                  $1332 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="2220" onchange="calculateTotal()" checked="unchecked" type="radio">
                  <strong>5 YRS.</strong><br />
                  $2220 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="2995" onchange="calculateTotal()" checked="unchecked" type="radio">
                  <strong>ULTIMATE</strong><br />
                  $2995 </label>
              </th>
              </div>
            </div>
</tr>
        </thead>
        <tbody>
          <tr>
            <td>Plus</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-1yr"  value="35" type="checkbox" onchange="calculateTotal()"  >
                + $35 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-3yr"  value="105" type="checkbox" onchange="calculateTotal()"  >
                + $105 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-5yr"  value="175" type="checkbox" onchange="calculateTotal()"  >
                + $175 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>Helicopter Option</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-1yr"  value="75" type="checkbox" onchange="calculateTotal()"  >
                + $75 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-3yr"  value="225" type="checkbox" onchange="calculateTotal()"  >
                + $225 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-5yr"  value="375" type="checkbox" onchange="calculateTotal()"  >
                + $375 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>PDD Option</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-1yr"  value="75" type="checkbox" onchange="calculateTotal()"  >
                + $75 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-3yr"  value="225" type="checkbox" onchange="calculateTotal()"  >
                + $225 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-5yr"  value="375" type="checkbox" onchange="calculateTotal()"  >
                + $375 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>Ground Ambulance Option</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-1yr"  value="75" type="checkbox" onchange="calculateTotal()"  >
                + $75 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-3yr"  value="225" type="checkbox" onchange="calculateTotal()"  >
                + $225 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-5yr"  value="375" type="checkbox" onchange="calculateTotal()"  >
                + $375 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>100 Mile Waiver Option</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-1yr"  value="95" type="checkbox" onchange="calculateTotal()"  >
                + $95 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-3yr"  value="285" type="checkbox" onchange="calculateTotal()"  >
                + $285 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-5yr"  value="475" type="checkbox" onchange="calculateTotal()"  >
                + $475 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <p class="text-right">
        <button class="btn btn-primary">Continue>></button>
      </p>
    </div>
 </form> </div>
 <script>
 function calculateTotal() 
{
    var subtotalField = document.getElementById("subtotal");
    var mycalc = document.forms["quote"].getElementsByTagName("input");
    var subtotal = 0;
    var tax = 0;
    var total = 0;

    for (var i = 0, length = mycalc.length; i < length; i++) {
        if (mycalc[i].checked) {
            subtotal += parseInt(mycalc[i].value);
        }
    }

    tax = (subtotal * .09).toFixed(2);
    total = (parseFloat(subtotal) + parseFloat(tax)).toFixed(2);

    document.getElementById("subtotal").innerHTML = "Sub-Total: $" + subtotal;
    document.getElementById("tax").innerHTML = "Tax: $" + tax;
    document.getElementById("total").innerHTML = "Total: $" + total;
};
 </script>>
</body>
</html>
4

3 回答 3

0

我是这样做的……花了我很长时间，它可能非常混乱，但它确实有效。我需要清理它。也许你能帮忙？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc Form</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
  <div class="row">

    <div class="span3" >
      <div style="margin-left:20px; height:200px;" class="well">
         <br />
         <div id="subtotal">Sub-Total:</div>
           <div id="tax">Tax:</div>
           <div id="total">Total:</div><br />

      </div>
    </div>
<form id="quote" class="form-horizontal">   
    <div class="span8">
      <table class="table table-condensed table-hover">
        <thead>
          <tr>
            <th> Options</th>
            <!-- Multiple Radios (inline) -->
            <div class="control-group">
               <label class="control-label"></label>
  <div class="controls">
              <th><label class="radio inline">
      <input name="rad" value="444" onchange="set_checked(false); calculateTotal(); hide_checkbox1();" checked="checked" type="radio">
                  <strong>1 YR</strong><br />
                  $444 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="1332" onchange="set_checked(false); calculateTotal(); hide_checkbox2();"  checked="unchecked" type="radio">
                  <strong>3 YRS.</strong><br />
                  $1332 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="2220" onchange="set_checked(false); calculateTotal(); hide_checkbox3();" checked="unchecked" type="radio">
                  <strong>5 YRS.</strong><br />
                  $2220 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="2995" onchange="set_checked(false); calculateTotal();" checked="unchecked" type="radio">
                  <strong>ULTIMATE</strong><br />
                  $2995 </label>
              </th>
              </div>
            </div>
</tr>
        </thead>
        <tbody>
          <tr>
            <td>Plus</td>
            <td><label class="checkbox">
                <input name="checkboxes"   value="35" type="checkbox" class="oneyr" onchange="calculateTotal()"  >
                + $35 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes"  class="threeyr"  value="105" type="checkbox" onchange="calculateTotal()"  >
                + $105 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="fiveyr"  value="175" type="checkbox" onchange="calculateTotal()"  >
                + $175 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>Helicopter Option</td>
            <td><label class="checkbox">
                <input name="checkboxes"   value="75" type="checkbox" class="oneyr" onchange="calculateTotal()"  >
                + $75 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="threeyr"  value="225" type="checkbox" onchange="calculateTotal()"  >
                + $225 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="fiveyr"  value="375" type="checkbox" onchange="calculateTotal()"  >
                + $375 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>PDD Option</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="oneyr"   value="75" type="checkbox" onchange="calculateTotal()"  >
                + $75 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="threeyr"  value="225" type="checkbox" onchange="calculateTotal()"  >
                + $225 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="fiveyr"  value="375" type="checkbox" onchange="calculateTotal()"  >
                + $375 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>Ground Ambulance Option</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="oneyr"  value="75" type="checkbox" onchange="calculateTotal()"  >
                + $75 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="threeyr"  value="225" type="checkbox" onchange="calculateTotal()"  >
                + $225 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="fiveyr"  value="375" type="checkbox" onchange="calculateTotal()"  >
                + $375 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td>100 Mile Waiver Option</td>
            <td><label class="checkbox">
                <input name="checkboxes" class="oneyr"   value="95" type="checkbox" onchange="calculateTotal()"  >
                + $95 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="threeyr"  value="285" type="checkbox" onchange="calculateTotal()"  >
                + $285 </label></td>
            <td><label class="checkbox">
                <input name="checkboxes" class="fiveyr"  value="475" type="checkbox" onchange="calculateTotal()"  >
                + $475 </label></td>
            <td>FREE</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <p class="text-right">
        <button class="btn btn-primary">Continue>></button>
      </p>
    </div>
 </form> </div>
<script>
 function calculateTotal() 
{
    var subtotalField = document.getElementById("subtotal");
    var mycalc = document.forms["quote"].getElementsByTagName("input");
    var subtotal = 0;
    var tax = 0;
    var total = 0;

    for (var i = 0, length = mycalc.length; i < length; i++) {
        if (mycalc[i].checked) {
            subtotal += parseInt(mycalc[i].value);
        }
    }

    tax = (subtotal * .09).toFixed(2);
    total = (parseFloat(subtotal) + parseFloat(tax)).toFixed(2);

    document.getElementById("subtotal").innerHTML = "Sub-Total: $" + subtotal;
    document.getElementById("tax").innerHTML = "Tax: $" + tax;
    document.getElementById("total").innerHTML = "Total: $" + total;
};
</script>
<script>
function set_checked(checked) {
    $('input[type=checkbox]').attr('checked', checked);
}

 </script>
<script>
function hide_checkbox1() {
    $('input.threeyr').css('display', 'none');
    $('input.fiveyr').css('display', 'none');
    $('input.oneyr').css('display', 'block');
}
</script>
<script>
function hide_checkbox2() {
    $('input.threeyr').css('display', 'block');
    $('input.fiveyr').css('display', 'none');
    $('input.oneyr').css('display', 'none');
}
</script>
<script>
function hide_checkbox3() {
    $('input.threeyr').css('display', 'none');
    $('input.fiveyr').css('display', 'block');
    $('input.oneyr').css('display', 'none');
}
</script>
</body>
</html>
于 2013-05-10T05:02:22.830 回答
0

为了隐藏页面上的元素，我会使用 CSS。我通常通过将 html 包装在带有 id（供 javascript 使用）和默认类的 div 中来做到这一点。

<style>
    div.one {display: none;}
    div.three {display: none;}
    div.five {display: none;}
    div.unlim {display: none;}
    div.div_one div.one {display: block;}
    div.div_three div.three {display:block;}
    div.div_five div.five {display:block;}
    div.div_unlim div.unlim {display:block;}
</style>

为了让它工作，你还必须将任何你想隐藏的东西包装在 div 标签中。因此，在这种情况下，您会将 tds 中的内容包装在 div 中。这是我修改的代码示例：

<div id="mydiv" class="div_unlim">
    <div class="span8">
      <table class="table table-condensed table-hover" id="mytable"> <thead>
          <tr>
            <th> Options</th>
            <!-- Multiple Radios (inline) -->
            <div class="control-group">
               <label class="control-label"></label>
  <div class="controls">
              <th><label class="radio inline">
      <input name="rad" value="444" onchange="calculateTotal('one')" checked="checked" type="radio"
              class="one">
                  <strong>1 YR</strong><br />
                  $444 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="1332" onchange="calculateTotal('three')" checked="unchecked" type="radio"
              class="three">
                  <strong>3 YRS.</strong><br />
                  $1332 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="2220" onchange="calculateTotal('five')" checked="unchecked" type="radio"
              class="five">
                  <strong>5 YRS.</strong><br />
                  $2220 </label>
              </th>
              <th><label class="radio inline">
      <input name="rad" value="2995" onchange="calculateTotal('unlim')" checked="unchecked" type="radio"
              class="unlim">
                  <strong>ULTIMATE</strong><br />
                  $2995 </label>
              </th>
              </div>
            </div>
</tr>
        </thead>
        <tbody>
          <tr>
            <td>Plus</td>
            <td><div class="one"><label class="checkbox">
                <input name="checkboxes" class="type-group type-group-1yr" value="35" type="checkbox" onchange="calculateTotal('one')"  >
                + $35 </label></div></td>
            <td><div class="three"><label class="checkbox" class="three">
                <input name="checkboxes" class="type-group type-group-3yr" value="105" type="checkbox" onchange="calculateTotal('three')"  >
                + $105 </label><div></td>
            <td><div class="five"><label class="checkbox" class="five">
                <input name="checkboxes" class="type-group type-group-5yr" value="175" type="checkbox" onchange="calculateTotal('five')"  >
                + $175 </label></div></td>
            <td><div class="unlim"><label class="unlim">FREE</label></div></td>
          </tr>
        </tbody>
      </table>
      <p class="text-right">
        <button class="btn btn-primary">Continue>></button>
      </p>
    </div>
   </div>

基本上，包装在“one”类中的任何内容只有在包装 div 具有“div_one”类时才可见。

然后，您还可以使用输入类来决定是否将其添加到您的总数中。您的 javascript 将变为：

<script type="text/javascript">
function calculateTotal(cls)
{
    var myDiv = document.getElementById('mydiv');
    myDiv.className = "div_" + cls;

    var subtotalField = document.getElementById("subtotal");
    var mycalc = document.forms["quote"].getElementsByTagName("input");
    var subtotal = 0;
    var tax = 0;
    var total = 0;

    for (var i = 0, length = mycalc.length; i < length; i++) {
        if (mycalc[i].checked ) {
            if(  myDiv.className == "div_" + mycalc[i].className )
               subtotal += parseInt(mycalc[i].value);
            else
            {
               switch( myDiv.className )
               {
                  case "div_one": 
                     if( mycalc[i].className == "type-group type-group-1yr" ) 
                        subtotal += parseInt(mycalc[i].value); 
                     break;
                  case "div_three": 
                     if( mycalc[i].className == "type-group type-group-3yr" ) 
                        subtotal += parseInt(mycalc[i].value); 
                     break;
                  case "div_five": 
                    if( mycalc[i].className == "type-group type-group-5yr" ) 
                        subtotal += parseInt(mycalc[i].value); 
                     break;
               }
            }
        }
    }

    tax = (subtotal * .09).toFixed(2);
    total = (parseFloat(subtotal) + parseFloat(tax)).toFixed(2);

    document.getElementById("subtotal").innerHTML = "Sub-Total: $" + subtotal;
    document.getElementById("tax").innerHTML = "Tax: $" + tax;
    document.getElementById("total").innerHTML = "Total: $" + total;
};
</script>

请注意，这不会取消选中复选框，但会从计算中排除它们。

于 2013-05-10T01:17:26.117 回答
0

@smitty 这是我的新代码版本。我将你所有的 show_checkbox 函数合并到一个函数中，并在 html 正文中添加了一个 onload 事件处理程序，因此当页面加载时复选框不可见。我还将计算函数修改为仅包括可见的输入值，因此，如果您选择选择不同的广播按钮，则无法取消选中所有复选框。可能对用户更友好，因为用户在比较定价 (IMO) 时不必再次选中复选框。希望它有帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc Form</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function set_checked(checked) {
    $('input[type=checkbox]').attr('checked', checked);
}

function show_checkbox(year) {
    $('input.threeyr').css('display', 'none');
    $('input.fiveyr').css('display', 'none');
    $('input.oneyr').css('display', 'none');
    if( year != null ) $('input.'+year).css('display','block');
}

function calculateTotal() 
{
    var subtotalField = document.getElementById("subtotal");
    var mycalc = document.forms["quote"].getElementsByTagName("input");
    var subtotal = 0;
    var tax = 0;
    var total = 0;

    for (var i = 0, length = mycalc.length; i < length; i++) {
    if (mycalc[i].checked && mycalc.display != 'none') 
        subtotal += parseInt(mycalc[i].value);
    }

    tax = (subtotal * .09).toFixed(2);
    total = (parseFloat(subtotal) + parseFloat(tax)).toFixed(2);

    document.getElementById("subtotal").innerHTML = "Sub-Total: $" + subtotal;
    document.getElementById("tax").innerHTML = "Tax: $" + tax;
    document.getElementById("total").innerHTML = "Total: $" + total;
};
</script>>
</head>

<body onload="show_checkbox();">
 <div class="row">

 <div class="span3" >
 <div style="margin-left:20px; height:200px;" class="well">
 <br />
 <div id="subtotal">Sub-Total:</div>
 <div id="tax">Tax:</div>
 <div id="total">Total:</div><br />

 </div>
 </div>
<form id="quote" class="form-horizontal"> 
 <div class="span8">
 <table class="table table-condensed table-hover" id="mytable"> <thead>
  <tr>
  <th> Options</th>
  <!-- Multiple Radios (inline) -->
  <div class="control-group">
  <label class="control-label"></label>
 <div class="controls">
  <th><label class="radio inline">
 <input name="rad" value="444" onchange="set_checked(false); calculateTotal(); show_checkbox('oneyr');" checked="checked" type="radio" class="one">
  <strong>1 YR</strong><br />
  $444 </label>
  </th>
  <th><label class="radio inline">
 <input name="rad" value="1332" onchange="set_checked(false); calculateTotal(); show_checkbox('threeyr');" checked="unchecked" type="radio" class="three">
  <strong>3 YRS.</strong><br />
  $1332 </label>
  </th>
  <th><label class="radio inline">
 <input name="rad" value="2220" onchange="set_checked(false); calculateTotal(); show_checkbox('fiveyr');" checked="unchecked" type="radio" class="five">
  <strong>5 YRS.</strong><br />
  $2220 </label>
  </th>
  <th><label class="radio inline">
 <input name="rad" value="2995" onchange="set_checked(false); calculateTotal(); show_checkbox();" checked="unchecked" type="radio" class="unlim">
  <strong>ULTIMATE</strong><br />
  $2995 </label>
  </th>
  </div>
  </div>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Plus</td>
 <td><label class="checkbox">
  <input name="checkboxes" value="35" type="checkbox" class="oneyr" onchange="calculateTotal()" >
  + $35 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="threeyr" value="105" type="checkbox" onchange="calculateTotal()" >
  + $105 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="fiveyr" value="175" type="checkbox" onchange="calculateTotal()" >
  + $175 </label></td>
 <td>FREE</td>
 </tr>
 <tr>
 <td>Helicopter Option</td>
 <td><label class="checkbox">
  <input name="checkboxes" value="75" type="checkbox" class="oneyr" onchange="calculateTotal()" >
  + $75 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="threeyr" value="225" type="checkbox" onchange="calculateTotal()" >
  + $225 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="fiveyr" value="375" type="checkbox" onchange="calculateTotal()" >
  + $375 </label></td>
 <td>FREE</td>
 </tr>
 <tr>
 <td>PDD Option</td>
 <td><label class="checkbox">
  <input name="checkboxes" class="oneyr" value="75" type="checkbox" onchange="calculateTotal()" >
  + $75 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="threeyr" value="225" type="checkbox" onchange="calculateTotal()" >
  + $225 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="fiveyr" value="375" type="checkbox" onchange="calculateTotal()" >
  + $375 </label></td>
 <td>FREE</td>
 </tr>
 <tr>
 <td>Ground Ambulance Option</td>
 <td><label class="checkbox">
  <input name="checkboxes" class="oneyr" value="75" type="checkbox" onchange="calculateTotal()" >
  + $75 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="threeyr" value="225" type="checkbox" onchange="calculateTotal()" >
  + $225 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="fiveyr" value="375" type="checkbox" onchange="calculateTotal()" >
  + $375 </label></td>
 <td>FREE</td>
 </tr>
 <tr>
 <td>100 Mile Waiver Option</td>
 <td><label class="checkbox">
  <input name="checkboxes" class="oneyr" value="95" type="checkbox" onchange="calculateTotal()" >
  + $95 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="threeyr" value="285" type="checkbox" onchange="calculateTotal()" >
  + $285 </label></td>
 <td><label class="checkbox">
  <input name="checkboxes" class="fiveyr" value="475" type="checkbox" onchange="calculateTotal()" >
  + $475 </label></td>
 <td>FREE</td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 </tbody>
 </table>
 <p class="text-right">
 <button class="btn btn-primary">Continue>></button>
 </p>
 </div>
 </form> </div>
</body>
</html>
于 2013-05-12T23:46:23.203 回答