0

JQuery を初めて使用し、問題に遭遇しました。7 つまたは 8 つのフィールドセットで構成されたフォームがあり、それぞれに多数のラジオ ボタンがあります。私がしなければならないことは、各フィールドセットの各ラジオ ボタンで選択された各オプションを記憶することと、ユーザーがオプションを変更することを決定した場合に格納された値を変更することです。私がこれまでに持っているコードは次のとおりです。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      price = [];
      total = 0;
      function Update_Subtotal(radio){
        $('input:checked').each( function() {
          price[1] = radio.getAttribute('price1');
          price[2] = radio.getAttribute('price2');
        });
        $("#1").text("$" + price[1]);
        $("#2").text("$" + price[2]);
      }
    </script>
  </head>
  <body>
    <form name="form" method="post" action="">
      <fieldset style="width: 50%;">
        <input type="radio" name="opt1" value="1" price1="100" class="1" onclick="Update_Subtotal(this);" />Option 1<br />
        <input type="radio" name="opt1" value="2" price1="200" class="1" onclick="Update_Subtotal(this);" />Option 2<br />
        <input type="radio" name="opt1" value="3" price1="300" class="1" onclick="Update_Subtotal(this);" />Option 3<br />
      </fieldset>
      <fieldset style="width: 50%;">
        <input type="radio" name="opt2" value="1" price2="10" class="2" onclick="Update_Subtotal(this);" />Option 1<br />
        <input type="radio" name="opt2" value="2" price2="20" class="2" onclick="Update_Subtotal(this);" />Option 2<br />
        <input type="radio" name="opt2" value="3" price2="30" class="2" onclick="Update_Subtotal(this);" />Option 3<br />
      </fieldset>
    </form>
    Totals:
    <div id="1"></div>
    <div id="2"></div>
  </body>
</html>

これは、各フィールドセットで変更された選択を表示する限り機能しますが、2 番目のフィールドセットに移動すると、最初に表示された合計が表示されます。

<div id="1"></div>

になる

$null

入力ラジオボタンの名前、値、またはクラスも変更できません。どんな助けも素晴らしかったです、ありがとう！

4

4 に答える 4

3

HTML を書き直さずに、これを試すことができます。

$(':radio').click(function() {
    $('#1').html($('[name=opt1]:checked').attr('price1'));
    $('#2').html($('[name=opt2]:checked').attr('price2'));
});​

jsFiddle の例

于 2012-07-16T21:26:15.950 に答える
0

いくつかの変更:

  1. 主な修正は、radio.getAttribute('price1'). Update_SubtotalHTML の場合とは異なり、同じラジオ ボタンから price1 と price2 を取得しようとすると、Eveytimeが呼び出されます。代わりに、次の 2 つのポイントに従ってください。
  2. 有効な ID ではない 1,2 の div の ID があります。それらを price-1、price-2 のようなものに変更します。
  3. カスタム属性 price1、price2 を使用していますが、これらは問題ありませんが、HTML5 の data-* タグを使用しない理由はありません。

これを試して：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      var total = 0;
      function Update_Subtotal(radio){
        $('input:checked').each( function(i, el) {
          var price = $(el).data('price');
          $("#price-" + (i + 1)).text("$" + price);
        });
      }
    </script>
  </head>
  <body>
    <form name="form" method="post" action="">
      <fieldset style="width: 50%;">
        <input type="radio" name="opt1" value="1" data-price="100" class="1" onclick="Update_Subtotal(this);" />Option 1<br />
        <input type="radio" name="opt1" value="2" data-price="200" class="1" onclick="Update_Subtotal(this);" />Option 2<br />
        <input type="radio" name="opt1" value="3" data-price="300" class="1" onclick="Update_Subtotal(this);" />Option 3<br />
      </fieldset>
      <fieldset style="width: 50%;">
        <input type="radio" name="opt2" value="1" data-price="10" class="2" onclick="Update_Subtotal(this);" />Option 1<br />
        <input type="radio" name="opt2" value="2" data-price="20" class="2" onclick="Update_Subtotal(this);" />Option 2<br />
        <input type="radio" name="opt2" value="3" data-price="30" class="2" onclick="Update_Subtotal(this);" />Option 3<br />
      </fieldset>
    </form>
    Totals:
    <div id="price-1"></div>
    <div id="price-2"></div>
  </body>
</html>

http://jsbin.com/obozuk/

于 2012-07-16T21:22:48.537 に答える
0

あなたもこれを試すことができます。簡単だと思います。:)

$('input:radio').click(function(){
   $('#1').text($(this).attr('price1'));
   $('#2').text($(this).attr('price2'));
      });​

jsFiddle リンク

于 2012-07-16T21:35:45.677 に答える
0

これが発生する理由は、2 番目の要素に到達したときに price1 が見つからないため、null を設定するためです。これを修正するには、次のようにします。

$('input:checked').each( function() {  
     price[1] = radio.getAttribute('price1') != null ? radio.getAttribute('price1') : price[1];  
     price[2] = radio.getAttribute('price2') != null ? radio.getAttribute('price2') : price[2];  
});
于 2012-07-16T21:27:58.017 に答える