Форум

Лунтик · #1 (**permalink**) 16.06.2020, 22:49

У меня есть код. Надо добавить еще один <input type="number" id="count2" name="Количество2" value="0" min="0" /> чтобы он работал как и первые вот код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elevator">
<input type="radio" id="lift" class="a1" value="200" name="itemtype1" checked />
  <span id="lift2">200</span>
  <input type="radio" id="net_lift" class="a1" value="150" name="itemtype1" /> 150
  <input type="radio" id="net_lift" class="a1" value="10" name="itemtype1" /> 150
  <input type="radio" id="net_lift" class="a1" value="1500" name="itemtype1" /> 150
<br/>


  <input type="number" id="count2" name="Количество2" value="0" min="0" />
</div>

<br> Итого:
<span id="final_price_yslug">0</span> руб

<script>
jQuery(function($) {
  var calc = function() {
    var price = 0;
    $('#elevator .a1:checked').each(function() {
      price += parseInt($(this).val());
    });
    price *= parseInt($('#count2').val());
    $('#final_price_yslug').text(price);
  };
  $('#elevator .a1').on('change', calc);
  $('#elevator #count2').on('input', calc);
});
</script>
    
</body>
</html>

Nexus · #2 (**permalink**) 17.06.2020, 01:52

Так?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elevator">
<input type="radio" id="lift" class="a1" value="200" name="itemtype1" checked />
  <span id="lift2">200</span>
  <input type="radio" id="net_lift" class="a1" value="150" name="itemtype1" /> 150
  <input type="radio" id="net_lift" class="a1" value="10" name="itemtype1" /> 150
  <input type="radio" id="net_lift" class="a1" value="1500" name="itemtype1" /> 150
<br/>
 
 
  <input type="number" id="count2" name="Количество2" value="0" min="0" />
  <input type="number" id="count3" name="Количество3" value="0" min="0" />
</div>
 
<br> Итого:
<span id="final_price_yslug">0</span> руб
 
<script>
jQuery(function($) {
  var calc = function() {
    var price = 0;
    $('#elevator .a1:checked').each(function() {
      price += parseInt($(this).val());
    });
    price *= Math.max(1, parseInt($('#count2').val()));
    price *= Math.max(1, parseInt($('#count3').val()));
    $('#final_price_yslug').text(price);
  };
  $('#elevator .a1').on('change', calc);
  $('#elevator #count2, #elevator #count3').on('input', calc);
});
</script>
     
</body>
</html>

laimas · #3 (**permalink**) 17.06.2020, 02:19

Nexus, скопировал на автомате не нужное?

$('#elevator .a1:checked').each

laimas · #4 (**permalink**) 17.06.2020, 06:22

Лунтик, радио кнопки, это именованная взаимозависимая группа кнопок. В такой группе иметь состояние "выбрано" (checked = true) может только одна из них. Если выбирается другая, то она получает это состояние, а у ранее выбранной выбор сбрасывается (checked = false). Получать значение этой группы обходом всех в цикле бессмысленно. В нативном JS его можно получить как RadioNodeList.value, а в JQ $('#elevator .a1:checked').val(), вернет значение выбранной. Это флажки являются независимыми элементами, и чтобы получить все значения выбранных, можно обойти их и циклом.

Для удобства выбора флажков/радио используйте label, в этом случае выбрать кнопку можно и по тексту метки к ней. А идентификаторы (id) должны быть уникальными значениями в пределах всего документа, то есть id="net_lift" у трех кнопок, это ошибка. Они вообще не нужны в данном случае. Именовать поля как "Количество2" можно, но не стоит. Если не требуется отправка поля на сервер (отправление формы), то имя не обязательно указывать, кроме радио кнопок.

Обработку можно делегировать, но если умножать на 0, значение которое разрешено, то будет ноль, логично минимальное, это 1, так такое значение не повлияет на расчет.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="elevator">
    <label><input type="radio" class="a1" value="200" name="itemtype1" checked /> 200</label>
    <label><input type="radio" class="a1" value="250" name="itemtype1" /> 250</label>
    <label><input type="radio" class="a1" value="300" name="itemtype1" /> 300</label>
    <label><input type="radio" class="a1" value="350" name="itemtype1" /> 350</label>
    <br/>
  
  
    <input type="number" id="count2" value="1" min="1" />
    <input type="number" id="count3" value="1" min="1" />
</div>

<span id="final_price_yslug">0</span>

<script>
$('#elevator').on('change input', 'input', function(e) {
    var price = $(e.delegateTarget).find('input:radio:checked').val() * $('#count2').val() * $('#count3').val();
    $('#final_price_yslug').text(price.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' }))
});
</script>
</body>
</html>

Если в кнопках типа number разрешен ручной ввод, то его нужно проверять, либо проверку их значений производить перед расчетом.

Лунтик · #5 (**permalink**) 17.06.2020, 08:42

А можно сделать так чтобы второй <input type="number" id="count3" value="1" min="1" /> имел свою цену и только прибовлялся к опщему значению .Тоесть первый <input type="number" id="count1" value="1" min="1" />Ьуде раработать как и работал а второй уже бетет прибовлятся к ответу

Nexus · #6 (**permalink**) 17.06.2020, 15:21

Сообщение от laimas

скопировал на автомате не нужное?

я, признаться, код по диагонали смотрел, поэтому этой "ошибки" даже не заметил.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="elevator">

    <div class="container">
        <div>
            <label><input type="radio" class="a1" value="200" name="itemtype1" checked /> 200</label>
            <label><input type="radio" class="a1" value="250" name="itemtype1" /> 250</label>
            <label><input type="radio" class="a1" value="300" name="itemtype1" /> 300</label>
            <label><input type="radio" class="a1" value="350" name="itemtype1" /> 350</label>
        </div>
        <input type="number" id="count2" value="1" min="1" />
    </div>
  
    <div class="container">
        <div>
            <label><input type="radio" class="a1" value="200" name="itemtype2" checked /> 200</label>
            <label><input type="radio" class="a1" value="250" name="itemtype2" /> 250</label>
            <label><input type="radio" class="a1" value="300" name="itemtype2" /> 300</label>
            <label><input type="radio" class="a1" value="350" name="itemtype2" /> 350</label>
        </div>
        <input type="number" id="count3" value="1" min="1" />
    </div>
    
</div>

<span id="final_price_yslug">0</span>

<script>
    $('#elevator').on('change input', 'input', function(e) {
        var price = $(e.delegateTarget).find('.container').map(function () {
            return this.querySelector('input[type="radio"]:checked').value * this.querySelector('[type="number"]').value;
        }).toArray().reduce(function (sum, price) {
            return sum + price;
        }, 0);
        
        $('#final_price_yslug').text(price.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' }))
    }).find('input').trigger('input')
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript