Question

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

此外，我在表单中构建了一些总计算。当选择了不同的单选按钮时，我希望清除所有的ckeck框并校正总计。

这是我使用bootstrap 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>

Answer 1

为了隐藏页面上的元素，我会使用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标签中。所以在这种情况下你将把东西包装在div中的tds中。以下是我修改过的代码示例：

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

基本上，当包装div具有类'div_one'时，包含在'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>

请注意，这不会取消选中复选框，但会将其排除在计算之外。

Answer 2

我这样做了......把我带走了，它可能非常凌乱，但它确实有效。我需要清理它。也许你可以帮忙吗？

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

Answer 3

@smitty这是我的新代码版本。我将所有show_checkbox函数放入一个函数中，并向html主体添加了一个onload事件处理程序，因此当页面加载时，复选框不可见。我还修改了calculateTotal函数以仅包含可见的输入值，因此如果您希望在选择其他单选按钮时无法取消选中所有复选框。在比较定价（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>

计算表格几乎完成

3 个答案: