计算平均单选按钮输入值，jQuery

Question

我使用相当简单的功能来计算多个单选按钮输入的平均值。它似乎确实有效，但计算的值不正确。

＆＃13;

＆＃13;

$("#submit_button").click(function() {
  var total = 0,
    valid_labels = 0,
    average;

  $('.input_value').each(function() {
    var val = parseInt($(this).val(), 10);
    if (!isNaN(val)) {
      valid_labels += 1;
      total += val;
    }
  });

  $('.avg_score').val(total / valid_labels);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" class="input_value" name="q7" value=1>1</label>
<label><input type="radio" class="input_value" name="q7" value=2>2</label>
<label><input type="radio" class="input_value" name="q7" value=3>3</label>
<label><input type="radio" class="input_value" name="q7" value=4>4</label>
<label><input type="radio" class="input_value" name="q7" value=5>5</label>
<label><input type="radio" class="input_value" name="q7" value=6>6</label>
<label><input type="radio" class="input_value" name="q7" value=7>7</label>
<br/>
<label><input type="radio" class="input_value" name="q8" value=1>1</label>
<label><input type="radio" class="input_value" name="q8" value=2>2</label>
<label><input type="radio" class="input_value" name="q8" value=3>3</label>
<label><input type="radio" class="input_value" name="q8" value=4>4</label>
<label><input type="radio" class="input_value" name="q8" value=5>5</label>
<label><input type="radio" class="input_value" name="q8" value=6>6</label>
<label><input type="radio" class="input_value" name="q8" value=7>7</label>
<br/>
<label><input type="text" class="avg_score" name="avg_score" width="30" height="50" value="">avg. score</label>

<section id="submit">
  <input type="button" name="submit" id="submit_button" value="Send">
</section>

＆＃13;

＆＃13;

＆＃13;

那是我的小提琴：https://jsfiddle.net/efgxLgw3/

Answer 1

您的问题是因为您正在遍历所有无线电，而不仅仅是:checked的无线电。要解决此问题，您只需将:checked添加到选择器即可。

但是，您可以使用reduce()修改逻辑，如下所示：

＆＃13;

＆＃13;

$("#submit_button").click(function() {
  var $checked = $('.input_value:checked');
  var total = $checked.map(function() {
    return parseInt(this.value, 10);
  }).get().reduce(function(a, b) { 
    return a + b;
  });
  
  $('.avg_score').val(total / $checked.length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" class="input_value" name="q7" value=1>1</label>
<label><input type="radio" class="input_value" name="q7" value=2>2</label>
<label><input type="radio" class="input_value" name="q7" value=3>3</label>
<label><input type="radio" class="input_value" name="q7" value=4>4</label>
<label><input type="radio" class="input_value" name="q7" value=5>5</label>
<label><input type="radio" class="input_value" name="q7" value=6>6</label>
<label><input type="radio" class="input_value" name="q7" value=7>7</label>
<br/>
<label><input type="radio" class="input_value" name="q8" value=1>1</label>
<label><input type="radio" class="input_value" name="q8" value=2>2</label>
<label><input type="radio" class="input_value" name="q8" value=3>3</label>
<label><input type="radio" class="input_value" name="q8" value=4>4</label>
<label><input type="radio" class="input_value" name="q8" value=5>5</label>
<label><input type="radio" class="input_value" name="q8" value=6>6</label>
<label><input type="radio" class="input_value" name="q8" value=7>7</label>
<br/>
<label><input type="text" class="avg_score" name="avg_score" width="30" height="50" value="">avg. score</label>

<section id="submit">
  <input type="button" name="submit" id="submit_button" value="Send">
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想要一个更短的一个，你可以去：

$("#submit_button").click(function() {
  var total = 0, valid_labels = $('.input_value:checked').length;
    
  for(var i = 0; i < valid_labels; i++){
    total += parseInt($('.input_value:checked')[i].value);
  }

  $('.avg_score').val(total / valid_labels);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" class="input_value" name="q7" value=1>1</label>
<label><input type="radio" class="input_value" name="q7" value=2>2</label>
<label><input type="radio" class="input_value" name="q7" value=3>3</label>
<label><input type="radio" class="input_value" name="q7" value=4>4</label>
<label><input type="radio" class="input_value" name="q7" value=5>5</label>
<label><input type="radio" class="input_value" name="q7" value=6>6</label>
<label><input type="radio" class="input_value" name="q7" value=7>7</label>
<br/>
<label><input type="radio" class="input_value" name="q8" value=1>1</label>
<label><input type="radio" class="input_value" name="q8" value=2>2</label>
<label><input type="radio" class="input_value" name="q8" value=3>3</label>
<label><input type="radio" class="input_value" name="q8" value=4>4</label>
<label><input type="radio" class="input_value" name="q8" value=5>5</label>
<label><input type="radio" class="input_value" name="q8" value=6>6</label>
<label><input type="radio" class="input_value" name="q8" value=7>7</label>
<br/>
<label><input type="text" class="avg_score" name="avg_score" width="30" height="50" value="">avg. score</label>

<section id="submit">
  <input type="button" name="submit" id="submit_button" value="Send">
</section>