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>

这可以在每个字段集中显示更改的选择，但是当移动到第二个字段集时，第一个字段集的总数显示在

<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'). EveytimeUpdate_Subtotal被称为您试图从同一个单选按钮获取 price1 和 price2，而您的 HTML 并非如此。所以请遵循接下来的两点。
  2. 您将 div 的 id 设为 1,2，它们不是有效的 id。将它们更改为价格 1、价格 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

发生这种情况的原因是，当它到达第二个元素时，它找不到 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 回答
0

你也可以试试这个。我想很简单。:)

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

jsFiddle 链接

于 2012-07-16T21:35:45.677 回答