时间戳

首页 > 解决方案 > Sum Checked 单选按钮值不起作用

javascript - Sum Checked 单选按钮值不起作用

问题描述

我目前尝试对单选按钮选择的值求和，但我无法使其工作，我错过了什么？

$(document).ready(function() {
    function calcscore(){
        var score = 0;
        var ele = document.getElementsByClassName("r1");
        for(i = 0; i < ele.length; i++) {
            if(ele[i].checked) {
                score += parseInt(ele[i].value);
            }
        }
        $("input[name=sum]").val(score)
    }

    function change(){

        $("val.(score)").change(function(){
            calcscore()
        });
    };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <label class="radio-inline">
        <input class="r1" type="radio" name="a2" value="9" />Option 1
    </label>
    <label class="radio-inline">
        <input class="r1" type="radio" name="a2" value="18" />Option 2
    </label>
    <label class="radio-inline">
        <input class="r1" type="radio" name="a2" value="10" />Option 3
    </label>
    <br />
    <label class="radio-inline">
        <input class="r1" type="radio" name="a3" value="10" />Option 1
    </label>
    <label class="radio-inline">
        <input class="r1" type="radio" name="a3" value="10" />Option 2
    </label>
    <label class="radio-inline">
        <input class="r1" type="radio" name="a3" value="10" />Option 3
    </label>
    <br />
    <input type="text" name="sum" />
</form>

如果您能找到问题所在，您能否给我每行的详细信息，以便我从中学习？

谢谢

标签： javascripthtmljquery

解决方案

$("val.(score)").不是您在更改功能上调用的有效元素。

我已经分配了一个类.score，或者您也可以使用.r1所有将在change函数上调用的输入类型

还可以考虑使用 totaljQuery或 Pure JSnot Ideal 来混合两者以避免混淆。

我在jQuery下面添加了两个唯一的解决方案，您可以选择最适合您的解决方案。

根据您的代码混合 JS 和 jQuery

运行下面的 Snippet 以查看它的工作情况。

function calcscore() {
  var score = 0;
  var ele = document.getElementsByClassName("r1");
  for (i = 0; i < ele.length; i++) {
    if (ele[i].checked) {
      score += parseInt(ele[i].value);
    }
  }
  $("input[name=sum]").val(score)
}

function change() {

  $(".score").on('change', function() {
    calcscore()
  });
}

change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a2" value="9">Option 1
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a2" value="18">Option 2
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a2" value="10">Option 3
    </label>
  <br>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a3" value="10">Option 1
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a3" value="10">Option 2
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a3" onchange=() value="10">Option 3
    </label>
  <br>
  <input type="text" name="sum" />
</form>

仅使用 Jquery 和.each()函数

如果您只想通过 jQuery 执行此操作。这是工作代码。

我们可以使用.r1class 和 use:checked来检查哪个元素被检查并通过 data 获取它的值.each并以这种方式进行总结。

function calcscore(_this) {
  var score = 0;
  $('.r1:checked').each(function(index, data) {
    score += parseInt(data.value);
  })
  $("input[name=sum]").val(score)
}

function change() {
  $(".score").on('change', function() {
    calcscore()
  });
}

change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a2" value="9">Option 1
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a2" value="18">Option 2
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a2" value="10">Option 3
    </label>
  <br>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a3" value="10">Option 1
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a3" value="10">Option 2
    </label>
  <label class="radio-inline">
      <input class="r1 score" type="radio" name="a3" value="10">Option 3
    </label>
  <br>
  <input type="text" name="sum" />
</form>

推荐阅读