Jquery и запуск скрипта на сайте

147

19 апреля 2022, 01:10

Есть скрипт

<script>
 $(document).ready(function(){
    var target =$('input[name="chose"]:checked').val();
    var ttarget = $('#select').val();
    var sum = target* ttarget;
  
    $('#js-result').html('TOTAL:$ ' + sum +'<sup>US</sup>');
});
</script>

Скрипт делает следующее: забирает значение из input radio и select (значения числовые), затем их перемножает и выводит сумму текстовом поле. Мне необходимо, чтобы скрипт этот работал при следующих условиях

При загрузке сайта, т.е. автоматически подсчитывал дефолтные значения и выводил на экран (это уже сделано, если что)
При изменении числовых значений radio или select.

Можно ли вообще это сделать как-то в этом скрипте?

Answer 1

Сделайте функцию и вызывайте её когда вам будет нужно

function ActionName(){
  let target = Number($('input[name="chose"]:checked').val()),
      ttarget = Number($('#select').val()),
      sum = target * ttarget;
  $('#js-result').html('TOTAL:$ '+sum+'<sup>US</sup>');
}
$(document).ready(ActionName);
$('input[name="chose"], #select').on('change', ActionName);

body > span {
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Chose: 
<span>
  <input type="radio" name="chose" value="23"><br>
  23
</span>
<span>
  <input type="radio" name="chose" value="123" checked><br>
  123
</span>
<span>
  <input type="radio" name="chose" value="1"><br>
  1
</span>
<span>
  <input type="radio" name="chose" value="544"><br>
  544
</span>
<span>
  <input type="radio" name="chose" value="5"><br>
  5
</span>
<span>
  <input type="radio" name="chose" value="99"><br>
  99
</span>
<br>
Select: <input type="number" id="select" value="19">
<div id="js-result"></div>