javascript - 必要な計算フォームはほぼ完成

Question

ラジオボタンとチェックボックスのあるフォームがあります。各ラジオボタンの下には、そのラジオボタンに関連するチェックボックスの列があります。私が探しているのは、そのラジオボタンに関連しないチェックボックスを非表示にする方法です。

また、フォームに合計計算をいくつか作成しました。別のラジオボタンが選択されたときに、チェックボックスをすべてクリアして合計を修正したいと考えています。

これは、ブートストラップ 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>

score 0 · Accepted Answer

@smitty ここにあなたの新しいコードの私のバージョンがあります。すべての show_checkbox 関数を 1 つの関数にまとめ、onload イベントハンドラーを html 本文に追加して、ページが読み込まれたときにチェックボックスが表示されないようにしました。また、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>

score 0 · Accepted Answer

私はこのようにしました...永遠にかかりました。おそらく非常に面倒ですが、機能します。私はそれをきれいにする必要があります。多分あなたは助けることができますか？

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

javascript - 必要な計算フォームはほぼ完成

3 に答える 3

Related

Reference