0

私は初心者です。この投稿に基づいてコードを作成しました: SUM ラジオ ボタンの値とチェックボックスの値を 1 つの計算で - javascript と html

値が 1 ～ 5 (最初のグループ) と 100 ～ 500 (2 番目のグループ) のラジオ ボタンの 2 つのグループを作成しました。各グループから選択したボタンの値を使用して、異なる計算を行い、結果を表示する必要があります。

ここでは、最初のグループの値に 2 を掛けて、2 番目のグループの値を加算しています。ここで、別の計算の結果を表示したいと思います。例えば： 

var sum=parseInt(val1-3) + parseInt(val2*4)

両方の結果を別々の「セル」に同時に表示するにはどうすればよいですか。

<form name="form1" id="form1" runat="server">
<legend>Header 1</legend>
<p><input id="rdo_1" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);"><label for="radio1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);"><label for="radio2">Radio 2</label></p>
<p><input id="rdo_3" type="radio" value="3" name="price" onClick="DisplayPrice(this.value);"><label for="radio3">Radio 3</label></p>
<p><input id="rdo_4" type="radio" value="4" name="price" onClick="DisplayPrice(this.value);"><label for="radio4">Radio 4</label></p>
<p><input id="rdo_5" type="radio" value="5" name="price" onClick="DisplayPrice(this.value);"><label for="radio5">Radio 5</label></p>
</form>                    

<hr>

<form name="form2" id="form2" runat="server">
<legend>Header 2</legend>
<p><input id="rdo_1" type="radio" value="100" name="price2" onClick="DisplayPrice(this.value);"><label for="rad1">Radio 1</label></p>
<p><input id="rdo_2" type="radio" value="200" name="price2" onClick="DisplayPrice(this.value);"><label for="rad2">Radio 2</label></p>
<p><input id="rdo_3" type="radio" value="300" name="price2" onClick="DisplayPrice(this.value);"><label for="rad3">Radio 3</label></p>
<p><input id="rdo_4" type="radio" value="400" name="price2" onClick="DisplayPrice(this.value);"><label for="rad4">Radio 4</label></p>
<p><input id="rdo_5" type="radio" value="500" name="price2" onClick="DisplayPrice(this.value);"><label for="rad5">Radio 5</label></p>
</form>                             


<p><label for="valueTotal">Value$:</label>
<input type="text" name="valueTotal" id="valueTotal" value="" size="2"readonly="readonly">    </p>

<script type="text/javascript">
function DisplayPrice(price)
{
    var val1 = 0;
    for( i = 0; i < document.form1.price.length; i++ )
    {
        if( document.form1.price[i].checked == true )
        {
            val1 = document.form1.price[i].value;
        }
    }

    var val2 = 0;
    for( i = 0; i < document.form2.price2.length; i++ )
    {
        if( document.form2.price2[i].checked == true )
        {
            val2 = document.form2.price2[i].value;
        }
    }

    var sum=parseInt(val1*2) + parseInt(val2);
    document.getElementById('valueTotal').value=sum;
}
</script>
4

1 に答える 1

0

結果に対して異なる入力フィールドを定義するだけです。

<p>
  <label for="valueTotal1">Value1$:</label>
  <input type="text" name="valueTotal1" id="valueTotal1"
  value="" size="2" readonly="readonly" />
</p>
<p>
  <label for="valueTotal2">Value2$:</label>
  <input type="text" name="valueTotal2" id="valueTotal2"
  value="" size="2" readonly="readonly" />
</p>
<p>
  <label for="valueTotal3">Value3$:</label>
  <input type="text" name="valueTotal3" id="valueTotal3"
  value="" size="2" readonly="readonly" />
</p>


function DisplayPrice() {
  for (i = 0; i < document.form1.price.length; i++) {
    if (document.form1.price[i].checked == true) {
      val1 = document.form1.price[i].value;
    }
  }
  for (i = 0; i < document.form2.price2.length; i++) {
    if (document.form2.price2[i].checked == true) {
      val2 = document.form2.price2[i].value;
    }
  }

  if (val1 != null && val2 != null) {
    document.getElementById('valueTotal1').value = parseInt(val1) * 2 + parseInt(val2);
    document.getElementById('valueTotal2').value = parseInt(val1) * 3 + parseInt(val2);
    document.getElementById('valueTotal3').value = parseInt(val1) * 4 + parseInt(val2);
  }
}

jQuery の使用が許可されている場合は、関数を単純化できます。

function DisplayPrice() {
  var val1 = $('input[name=price]:radio:checked').val();
  var val2 = $('input[name=price2]:radio:checked').val();

  if(val1 != null && val2 != null) {
    $('#valueTotal1').val(parseInt(val1) * 2 + parseInt(val2));
    $('#valueTotal2').val(parseInt(val1) * 3 + parseInt(val2));
    $('#valueTotal3').val(parseInt(val1) * 4 + parseInt(val2));
  }
}

jQueryを使用する場合と使用しない場合の2つのフィドルを作成しました

もう 1 つ注意してくださいparseInt(val1-3)。文字列が整数に変換される前に 3 を引くことはできません。

編集
デフォルト値が必要な場合は、チェックされたラジオ ボタンを検索する前に変数に書き込むことができます。チェックされたボタンが見つからない場合、デフォルト値は同じままです。別の解決策は、変数がまだ空であるかどうかを確認し、チェックされたボタンを検索した後にデフォルト値を入力することです。

function DisplayPrice() {
  //Default values - solution I
  var val1 = 1;
  var val2 = 1;

  val1 = $('input[name=price]:radio:checked').val();
  val2 = $('input[name=price2]:radio:checked').val();

  //Default values - solution II
  if(val1 == null) {
    val1 = 1;
  }
  if(val2 == null) {
    val2 = 1;
  }

  if(val1 != null && val2 != null) {
    $('#valueTotal1').val(parseInt(val1) * 2 + parseInt(val2));
    $('#valueTotal2').val(parseInt(val1) * 3 + parseInt(val2));
    $('#valueTotal3').val(parseInt(val1) * 4 + parseInt(val2));
  }
}
于 2013-01-16T17:59:50.733 に答える