Question

我试图获得所有径向按钮的总和。共有三组，每组三个，可能有三个检查。这些是由您将在索引页面中看到的Angular ng-repeat创建的。

我已经潜伏过许多帖子，说他们找到了一种方法来做到这一点，但我仍然没有得到我需要的输出。我知道jQuery正在运行，因为我测试了它。所以我不知道发生了什么。

请查看您是否可以发现或假设发生了什么。谢谢代码看起来很可怕而且不均匀但这是因为盒子一直在搞乱我的代码层次结构。

<!DOCTYPE html>
    <html>
    <head>
      <title>Cruiseline</title>
      <%= javascript_include_tag 'application'%>
      <%= stylesheet_link_tag    'application', media: 'all'%>
      <%= csrf_meta_tags %>
      <script>
        $( document ).ready(function() {


          $(".all_aboard").click(".radial_input", function() {
            var total = 0;
            $("input[type=radio]:checked").each(function() {
              total += parseFloat($(this).val());
              });

            $(".totalSum").val(total);
          });
        });
      </script>
    </head>
    <body>
    <%= yield %>
    </body>
    </html>
<h1 class="title">Choose Your Sailings&nbsp;<span class="pick_one">(Pick one for each box)</span></h1>
<div class="all_aboard" ng-app="app">
    <div ng-controller="CruisesController">
      <div ng-repeat="cruise in cruises">
        <div class="panel panel-default">
            <div class="panel-body">                
            <div ng-controller="SailingsController">
                <div ng-repeat="sail in sailings ">
                    <div ng-if="sail.cruise_id == cruise.id">
                <div>
                  <img src="{{ sail.main_image }}" class="cruise_picture"/>
                  <img><%= image_tag "lowest_price_tag.png", class: "lowest_price_tag"%> <img/>
                </div>                      
                <div class="cruise_details">{{cruise.name}}-{{cruise.ship_name}}</div>
                        <h1 class="sailing_title">{{ sail.name }}</h1>
                        <div ng-controller="SailingOptionsController">
                            <div class="option_box" ng-repeat="soption in sailing_options">
                                <div ng-if="soption.sailing_id == sail.id" >
                                 <div class="radio">
                                  <input class="radial_input" id="soption{{soption.id}}" type="radio" name="cruisePrice{{sail.id}}" data-price="{{soption.price}}">
                                  <div class="date">{{ soption.date}}</div>
                                  <div class="price">${{ soption.price}}</div>
                               </div>
                            </div>
                          </div>
                        </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</div>
<br/>
<br/>
<div class="divider"></div>
<div>
  <h1 class="you_selected_total">You Selected Sailings Total</h1>
  <input style="color:red;" type="text" class="totalSum" value="" readonly="readonly">
</div>

Answer 1

试试这个

我现在更新了答案，试试

$(".all_aboard").on("click",".radial_input", function() {
        var total = 0;
        $(document).find("input[type=radio]:checked").each(function() {

              total += parseFloat($(this).parent().find('.price').text());
          });

        $(".totalSum").val(total);
      });

Answer 2

我可以在你的代码中看到几件事。

首先，如果你使用jQuery来使事情有效，你应该把它包装在$(document).ready(function() {});下面。

$(document).ready(function () {
   $("input[type='radio']").click(function() {
      var total = 0;
      $("input[type=radio]:checked").each(function() {
         total += parseFloat($(this).val());
      });

      $(".totalSum").val(total);
   });
});

如果您打算使用代码添加更多单选按钮，那么您应该考虑使用jQuery“on”绑定事件。

接下来，如果您尝试启用多个选择（我假设您是，因为您希望获得总数），则应使用复选框而不是单选按钮。

接下来，在开发角度应用程序时尝试最小化jQuery的直接使用：它会导致很多混乱和不需要的场景，比如角度函数没有被执行，或者你的角度变量没有得到更新。

最后，看看下面的小提琴，看看它是否适合您的解决方案

JSFiddle: Update Price when Checked

获取径向按钮值的总和

2 个答案: