1

作業中の Web ページ内に JavaScript ブロックを作成しようとしています。私は高校以来JavaScriptを行っていませんが、私に戻ってきたくないようです:(

このコード ブロックでは、4 セットのラジオ ボタンが必要です。選択肢が選択されるたびに、各ラジオ グループの変数に価格が入力されます。すなわち 

    var firstPrice = $25
    var secondPrice = $56
    var thirdPrice = $80
    var fourthPrice = $90

次に、各ラジオ グループが 1 つの選択を行った後、サブミット ボタンに機能が追加され、各価格が合計されて非表示フィールド内に最終的な金額が表示されます。

    var totalPrice = (firstPrice + secondPrice + thirdPrice + fourthPrice)

私の質問は、グループ内のラジオ ボタンに数値を付けるにはどうすればよいですか。同じ名前ですが、グループごとに ID が異なります。次に、すべての価格グループを追加する関数を作成し、送信ボタンを onClick = totalPrice(); に設定しますか? ラジオ ボタンの 1 つのセットの例を次に示します。

        <label>
          <input type="radio" name="model" value="radio" id="item_0" />
          item 1</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_1" />
          item2</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_2" />
          item3</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_3" />
          Item4</label>
        <br />
        <label>
          <input type="radio" name="model" value="radio" id="item_4" />
          item5</label>

          </form>

次に、私のスクリプトは次のようになります。

    function finalPrice90{
var selectionFirst = document.modelGroup.value;
var selectionSecond = document.secondGroup.value;
var selectionThird = document.thirdGroup.value;
var selectionFourth = document.fourthGroup.Value;

var totalPrice = (selectionFirst + selectionSecond + selectionThird +         selectionFourth);
       }
4

3 に答える 3

0

このフィドルを試してみてください http://jsfiddle.net/tariqulazam/ZLQXB/

于 2012-10-08T04:02:21.170 に答える
0

valueラジオ入力の属性を、各ラジオ ボタンが表す価格に設定します。

計算するときは、各グループをループしてvalue、チェックされたラジオの属性を取得します。

value 属性は数値の文字列表現であるため、計算を行う前にそれを数値に戻す必要があります (ただし、これは単純なparseIntorparseFloatです)。

これは、純粋な JavaScript を使用した実用的なフィドルです: http://jsfiddle.net/XxZwm/

jQuery や Prototype (または MooTools、script.aculo.us など) のようなライブラリは、車輪の再発明を望まない DOM 操作コードの量に応じて、長期的にはこれを容易にする可能性があります。

于 2012-10-08T04:20:03.210 に答える
0

あなたの要件は非常に単純に思えます。ほとんどの質問に答えるはずの例を次に示します。フォームにはシングル クリック リスナーがあるため、フォーム コントロールがクリックされるたびに価格が更新されます。

<script type="text/javascript">

//function updatePrice(el) {
function updatePrice(event) {
  var el = event.target || event.srcElement;
  var form = el.form;
  if (!form) return;
  var control, controls = form.elements;
  var totalPrice = 0;
  var radios;

  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];

    if ((control.type == 'radio' || control.type == 'checkbox') && control.checked) {
      totalPrice += Number(control.value);
    }

    // Deal with other types of controls if necessary
  }
  form.totalPrice.value = '$' + totalPrice;
}

</script>

<form>
    <fieldset><legend>Model 1</legend>
    <input type="radio" name="model1" value="25">$25<br>
    <input type="radio" name="model1" value="35">$35<br>
    <input type="radio" name="model1" value="45">$45<br>
    <input type="radio" name="model1" value="55">$55<br>
    </fieldset>
    <fieldset><legend>Model 2</legend>
    <input type="radio" name="model2" value="1">$1<br>
    <input type="radio" name="model2" value="2">$2<br>
    <input type="radio" name="model2" value="3">$3<br>
    <input type="radio" name="model2" value="4">$4<br>
    <fieldset><legend>Include shipping?</legend>
      <span>$5</span><input type="checkbox" value="5" name="shipping"><br>
    </fieldset>

    <input name="totalPrice" readonly><br>
    <input type="reset" value="Clear form">
</form>

クリック イベントのフォームに単一のリスナーを配置して、価格を自動的に更新できます。その場合、更新ボタンを取り除くことができます。

于 2012-10-08T05:04:53.253 に答える