Question

我桌上有几个单选按钮。 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;
        }

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

closest(4) = 4

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)

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: