複数のラジオボタンの合計値に基づいてdiv値を変更します

Question

私はいくつかのラジオボタンをテーブルに持っています。 javascriptまたはjqueryがこのラジオボタンの値を追加し、[送信]ボタンをクリックせずにデフォルトの合計値を変更する方法。私は、ユーザーがラジオボタンをクリックしたときに、それが自動にコーディングが良いのですが、それが自動にデフォルトのdivを変更しないで下に私が見つけた

<table> 
    <tr> 
    <td> 
     <input type="radio" name="evaluation_1_3" value="1">1 
     <br> 
    </td> 
    <td> 
     <input type="radio" name="evaluation_1_3" value="2">2 
     <br> 
    </td> 
    <td> 
     <input type="radio" name="evaluation_1_3" value="3">3 
     <br> 
    </td> 
    <td> 
     <input type="radio" name="evaluation_1_3" value="4">4 
     <br> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input type="radio" name="evaluation_2_1" value="1">1 
     <br> 
    </td> 
    <td> 
     <input type="radio" name="evaluation_2_1" value="2">2 
     <br> 
    </td> 
    <td> 
     <input type="radio" name="evaluation_2_1" value="3">3 
     <br> 
    </td> 
    <td> 
     <input type="radio" name="evaluation_2_1" value="4">4 
     <br> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2" bgcolor="#ffffff" style=" height:;"> 
     <div id="total_score" name="total_score" align="center"> 
     <h3>0</h3> 
     </div> 
    </td> 
    </tr> 
</table> 

total_score div要素の値を変更を意味します。

$(document).ready(function() { 

     var evaluation_1_1 = $('input[name="evaluation_1_1"]:checked').val(); 
     var evaluation_1_2 = $('input[name="evaluation_1_2"]:checked').val(); 
var totals = parseInt(evaluation_1_1) + parseInt(evaluation_1_2); 
     alert(totals); 
     document.getElementById("total_score").innerHTML = totals; 
     } 

Answer 1

:radio Selectorを使用すると、すべてのラジオ要素を検索し、その変更イベントをサブスクライブできます。

$(document).ready(function() { 
 
    $(':radio').on('change', function() { 
 
    var evaluation_1_3 = $('input[name="evaluation_1_3"]:checked').val() || 0; 
 
    var evaluation_2_1 = $('input[name="evaluation_2_1"]:checked').val() || 0; 
 
    var totals = parseInt(evaluation_1_3, 10) + parseInt(evaluation_2_1, 10); 
 
    $("#total_score h3").html(totals); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="evaluation_1_3" value="1">1 
 
     <br> 
 
    </td> 
 
    <td> 
 
     <input type="radio" name="evaluation_1_3" value="2">2 
 
     <br> 
 
    </td> 
 
    <td> 
 
     <input type="radio" name="evaluation_1_3" value="3">3 
 
     <br> 
 
    </td> 
 
    <td> 
 
     <input type="radio" name="evaluation_1_3" value="4">4 
 
     <br> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="radio" name="evaluation_2_1" value="1">1 
 
     <br> 
 
    </td> 
 
    <td> 
 
     <input type="radio" name="evaluation_2_1" value="2">2 
 
     <br> 
 
    </td> 
 
    <td> 
 
     <input type="radio" name="evaluation_2_1" value="3">3 
 
     <br> 
 
    </td> 
 
    <td> 
 
     <input type="radio" name="evaluation_2_1" value="4">4 
 
     <br> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2" bgcolor="#ffffff" style=" height:;"> 
 
     <div id="total_score" name="total_score" align="center"> 
 
     <h3>0</h3> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

function total() { 
    var sum = 0; 
    $('input[type="radio"]:checked').forEach(function(el) { sum += $(el).val(); }); 

    document.getElementById("total_score").innerHTML = sum; 
} 

$('input[type="radio"]').on('click' , total)。

console.log(total()); 

Answer 3

$(document).ready(function() { 
 

 
     $('input[name*=evaluation_1],input[name*=evaluation_2]').each(function(){ 
 
     $(this).on('click',function(){ 
 
     var thisValue = $(this).val(); 
 
     var totals = parseInt($('#total_score').text())+ parseInt(thisValue); 
 
     $('#total_score').find('h3').text(totals); 
 
     }); 
 
     }); 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td> <input type="radio" id="evaluation_1_3" name="evaluation_1_3" value="1" >1<br></td> 
 
       <td> <input type="radio" id="evaluation_1_3" name="evaluation_1_3" value="2" >2<br></td> 
 
       <td> <input type="radio" id="evaluation_1_3" name="evaluation_1_3" value="3" >3<br></td> 
 
      <td> <input type="radio" id="evaluation_1_3" name="evaluation_1_3" value="4" >4<br></td> 
 

 
    <td> <input type="radio" id="evaluation_2_1" name="evaluation_2_1" value="1" >1<br></td> 
 
       <td> <input type="radio" id="evaluation_2_1" name="evaluation_2_1" value="2" >2<br></td> 
 
       <td> <input type="radio" id="evaluation_2_1" name="evaluation_2_1" value="3" >3<br></td> 
 
       <td> <input type="radio" id="evaluation_2_1" name="evaluation_2_1" value="4" >4<br></td> 
 

 
<td colspan="2" bgcolor="#ffffff" style=" height:;"><div id="total_score" name="total_score" align="center"><h3>59</h3></div></td>