Grafische Durchschnitt Radioknopf Eingabewerte, jQuery

Question

Ich verwende eher einfache Funktion, um den Durchschnittswert von mehreren Radio-Taste Eingaben zu zählen. Es funktioniert, scheint es, aber der gezählte Wert ist nicht korrekt.

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

Das ist meine Geige ist: https://jsfiddle.net/efgxLgw3/

Answer 1

Ihr Problem ist, dass Sie durch alle Radios sind Looping, nicht nur die eine, die war :checked. Um das zu beheben, können Sie einfach :checked zu Ihrem Selektor hinzufügen.

Allerdings könnten Sie die Logik ändern, indem reduce() verwenden, wie folgt aus:

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

Wenn Sie ein wenig kürzere wollen, hier gehen Sie:

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