Sum Checked Radio Button Value not working

user_12634902 0
Viewed 100

I currently try to sum radio button selected value, but I can't make it work, what am i missing?

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

if you can find what is wrong, can you give me detail per line so I can learn from it?

Thankyou

html jquery javascript
2 Answers

$("val.(score)"). is not valid element you are calling on change function.

I have assigned a class .score OR you can also use .r1 to all the input types you have which will be called on change function

Also consider using total jQuery or Pure JS not ideal to mix both to avoid confusions.

I have added both jQuery only solution as well below you can choose what suits you best.

Mix of JS and jQuery as per your code

Run Snippet below to see it working.

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>

Using Jquery Only and with .each() function

if you want to do this via jQuery only. Here is working code.

We can use .r1 class and use :checked to check which element is check and get it value via data of .each and sum it up that way.

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>

user_136690480

Firstly, $("val.(score)") is not valid element. Use $(".r1") instead.

Secondly, change() function should trigger to register input change. You can do that by call change() at the end, or using jQuery event listener (as function inside)

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

$(".r1").change(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>

user_35856730
Related