2013-05-09 69 views
0

我有一个单选按钮和复选框的形式。在每个单选按钮下是一列与该单选按钮相关的复选框。我在寻找的是如何隐藏不涉及该单选按钮的复选框。计算表格需要几乎完整

此外,我已经在窗体中构建了一些总计算。当选择不同的单选按钮时,我希望清除所有的Cckck框,并更正总数。

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

回答

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

为了隐藏页面上的元素,我会使用CSS。我通常通过将html包装到带有id的div(供JavaScript使用)和默认类中来完成此操作。

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

然后,您也可以使用输入类来决定是否将它添加到您的总数。您的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> 

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

0

@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> 
+0

感谢那个好多了!有关我如何能够显示井中所选物品的标题的任何想法? – DSmith 2013-05-13 05:01:53