Question

对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

我也无法更改输入单选按钮的名称，值或类别。任何帮助都很棒，谢谢！

Answer 1

如果不重新编写HTML，可以试试这个：

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

<强> jsFiddle example

Answer 2

一些变化：

主要修复方法是radio.getAttribute('price1')。 Eveytime Update_Subtotal被称为您试图从相同的单选按钮获取price1和price2，而不是HTML中的情况。所以请遵循接下来的两点。
你有div的id为1,2，它们不是有效的id。将它们更改为price-1，price-2。
您正在使用自定义属性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/

Answer 3

发生这种情况的原因是，当它到达第二个元素时，它找不到price1，所以put为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];  
});

Answer 4

你也可以试试这个。我猜想。：）

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

jsFiddle link

JQuery单选按钮的多个结果

4 个答案: