formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換

HTMLとform計算

数値を入れる度に、リアルタイムでoutputが変わる。

<form method="post" oninput="
result.value=parseInt(num_in1.value) * parseInt(num_radio.value) + parseInt(yukanum.value) * parseInt(num_radio2.value) ;
">
      
入力1<br>
<input type="text" name="num_in1" value="0" id="fm1">
ラジオボタン1<br>
<label><input type="radio" name="num_radio" value="100" checked><span class="outside"><span class="inside"></span></span>100</label><br>
<label><input type="radio" name="num_radio" value="200"><span class="outside"><span class="inside"></span></span>200</label><br>
<label><input type="radio" name="num_radio" value="300"><span class="outside"><span class="inside"></span></span>300</label><br>
<label><input type="radio" name="num_radio" value="400"><span class="outside"><span class="inside"></span></span>400</label><br>

入力2<br>
<input type="text" name="num_in2" value="0" id="fm2">
ラジオボタン2<br>
<label><input type="radio" name="num_radio2" value="500" checked><span class="outside"><span class="inside"></span></span>500</label><br>
<label><input type="radio" name="yukanum_radio" value="600"><span class="outside"><span class="inside"></span></span>600</label><br>
<label><input type="radio" name="yukanum_radio" value="700"><span class="outside"><span class="inside"></span></span>700</label><br>
<label><input type="radio" name="yukanum_radio" value="800"><span class="outside"><span class="inside"></span></span>800</label><br>

計算結果<br>
<output name="result" id="rkekka">0</output>
<span id="price"></span>円</p>

javascript（jquery）

$(function () {
 $('#fm1,#fm2,.outside').on('blur change input click', function () {
  setTimeout(function(){

      let text = document.getElementById('rkekka');
      let text2 = parseInt(text.innerHTML);
      let suuchi = document.getElementById('price');
      let text3 = text2.toLocaleString();
      suuchi.innerHTML = text3.toLocaleString();

   },100);
 });
});

CSS

/* 結果は */
#rkekka {
  display: none;
}


/* animations */
@keyframes radio-select {
  0% {
    transform: scale(0, 0);
  }
  65% {
    transform: scale(1.1, 1.1);
  }
  100% {
    transform: scale(1, 1);
  }
}
/*ラジオボタン*/
$almost-black: #444;
$border: #cccccc;
$size: 24px;
@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
label {
  position: relative;
  padding-left: 5px;
  margin-right: 15px;
  cursor: pointer;
}
input[type="radio"] {
  height: 1px;
  width: 1px;
  opacity: 0;
}
.outside {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -($size / 2);
  width: $size;
  height: $size;
  border: 2px solid $border;
  border-radius: 50%;
  box-sizing: border-box;
  background: #ffffff;
}
.inside {
  @include centerer;
  display: inline-block;
  border-radius: 50%;
  width: ($size - 10px);
  height: ($size - 10px);
  background: $almost-black;
  left: 3px;
  top: 3px;
  transform: scale(0, 0);
  color: $almost-black;
  .no-transforms & {
    left: auto;
    top: auto;
    width: 0;
    height: 0;
  }
}
input[type="radio"] {
  &:checked {
    + .outside .inside {
      animation: radio-select 0.1s linear;
      transform: scale(1, 1);
      .no-transforms & {
        width: ($size - 10px);
        height: ($size - 10px);
      }
    }
  }
}