平均ラジオボタンの入力値を数える、jQuery

Question

私は、ラジオボタンの複数の入力の平均値を数えるのにかなり単純な関数を使用しています。それはうまくいきますが、カウントされた値は正しくありません。

$("#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); 
 
});

<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>

私のバイオリンだ

：あなたはすべての無線をループしているので https://jsfiddle.net/efgxLgw3/

Answer 1

あなたの問題はあるが、:checkedだけではなく、一つでした。これを修正するには、セレクタに:checkedを追加するだけです。あなたは一つの小さな短いしたい場合は、ここであなたが行く

$("#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); 
 
});

<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>

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>

しかし、あなたはこのように、reduce()を使用してロジックを修正することができ