jquery умножение radio button на selector

169

16 апреля 2022, 03:30

Подскажите, как добавить в jquery умножение, чтобы при выборе radio button он умножал на колл. выбранного в selector и выводил сумму?

$(function(){
    $('.radio').change(function(){
        $('#price span').html($(this).val());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radio" class="radio" value="5"> - Яблоко
<input type="radio"  class="radio" value="10"> - Апельсин
<input type="radio" name="radio" class="radio" value="15"> - Чеснок
<br/>
<br/>
  <label for="#number">Number of licenses:</label>
   <select name="select__num" id="number">
      <option value="value1">1</option>
      <option value="value2">2</option>
      <option value="value3">3</option>
      <option value="value4">4</option>
      <option value="value5">5</option>
      <option value="value6" selected>6</option>
   </select>
  <br/>
  <br/>
<div id="price">Сумма - <span> </span></div>

Answer 1

Как-то так.

$(function(){
    $('.radio').change(calculate);
    
    $('#number').change(calculate);
    
});
function calculate(){
  $('#price span').html((+$("input[name=radio]:checked").val()) * (+$('#number option:selected').text()));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="apple" name="radio" class="radio" value="5"> - Яблоко
<input type="radio" id="orange" name="radio" class="radio" value="10"> - Апельсин
<input type="radio" id="chesnok" name="radio" class="radio" value="15"> - Чеснок
<br/>
<br/>
  <label for="#number">Number of licenses:</label>
   <select name="select__num" id="number">
      <option value="value1">1</option>
      <option value="value2">2</option>
      <option value="value3">3</option>
      <option value="value4">4</option>
      <option value="value5">5</option>
      <option value="value6" selected>6</option>
   </select>
  <br/>
  <br/>
<div id="price">Сумма - <span> </span></div>

Answer 2

Ответ @Aziz Umarov верен, но:

$('#number, .radio') - вместо двух обработчиков.
И лучше использовать событие .on('change', function() {...});.

А для автора вопроса, не используйте атрибут value у <option> для идентификации, как в вашем случае..

$('#number, .radio').on('change', function() {
  let a = Number($('.radio:checked').val()), // т.к. значение числовие, мы используем Number() для смены типа с string на number
      b = Number($('#number').val());
      
  $('#price span').text(a * b);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radio" class="radio" value="5"> - Яблоко
<input type="radio" name="radio" class="radio" value="10"> - Апельсин
<input type="radio" name="radio" class="radio" value="15"> - Чеснок
<br/>
<br/>
  <label for="#number">Number of licenses:</label>
   <select name="select__num" id="number">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option selected>6</option>
   </select>
  <br/>
  <br/>
<div id="price">Сумма - <span> </span></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Blob полученый при slice файла на добавляется в FormData

Я использую стандартное апи Fileslice(start, end) что бы получить часть файла и отправить его на сервер

156

Java

Почему не открывается ссылка в webview?

В приложении есть две кнопки при нажатии на которые открываются две разных ссылкиОдна ссылка на страницу входа открывается нормально а реферальная...

296

Java

Как правильно должен быть реализован Spring Hateoas?

У меня есть RESTful API, в котором я хочу реализовать гипермедию с помощью Spring HateoasДля всех ресурсов я уже сделал эту поддержку, но есть следующая...

201

Java

SPA с применением Java Swing

Подскажите, можно ли как-то сделать spa приложение с использованием swing? Воспользовавшись гуглом, нашла вариант по типу "десктопное приложение,...

284