根据多个单选按钮值的总和更改div值

debugcn 发表于 Dev

艾里

我的桌子上有几个单选按钮。javascript或jquery如何在不单击“提交”按钮的情况下添加此单选按钮值并更改默认总值。我的意思是，当用户单击单选按钮时，它会自动更改total_score 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>

我发现下面的编码是好的，但它不会自动更改默认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;
        }

萨帕尔

您可以使用:radioSelector查找所有单选元素，然后订阅其change事件。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。