Как изменить текст span из двух разных значений флажка - PullRequest
Новая
       37

Как изменить текст span из двух разных значений флажка

0 голосов
/ 10 июня 2019

Попытка сложить различные цены вместе, умножив их на множитель (без дней), моя функция работает на 100 км, но не дает никаких результатов при изменении на 200 км, где 100 км - R125 / день, а 200 км - R225 / день. , они представлены в виде ежедневных и итоговых значений, daily being the sum of extra's + 100kms и Total being = multiplier * extras + multiplier * 100kms

Я уже переписал свой сценарий с помощью нескольких предложений, но столкнулся с другой проблемой получения второго значения, чтобы показать значение, т.е. 200km. моя скрипка здесь: https://jsfiddle.net/shiataz12/mjnqth3L/169/

Я думал попробовать что-то вроде этого: 

$("#qr1").click(function() {
displayVals1();
});
$("#qr2").click(function() {
displayVals2();
});

Попытка получить R225 / День и R1125 / день в качестве значения, когда флажок 200 км установлен в качестве базового значения.

1 Ответ

1 голос
/ 11 июня 2019

Поскольку у меня был момент на руках, я сократил ваш код примерно до 15 строк.

Примечание , изменение всех входов обрабатывается одной функцией, которая просто повторяет всематематика каждый раз. 

$(function() {
  $("input.kilo").change(function() {
    $("input.kilo").not(this).prop("checked", false);
  });
  $("input, select").change(function() {
    //get the values of the selected options
    let v = $.map($("input[id^='qr']:checked"), function(i) {
      return parseFloat($(i).val());
    });
    let s = v.reduce((a, b) => a + b); //sum them up to a daily total
    console.log(v);
    $("#userdaily").text(s);
    $("#usertotal").text(s * parseFloat($("#mySelect>option:selected").val()));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="mySelect">No. Days</label>
<select name="mySelect" id="mySelect">
  <option name="one" value="1">1</option>
  <option name="two" value="2">2</option>
  <option name="three" value="3">3</option>
  <option name="four" value="4">4</option>
  <option name="five" value="5" selected>5</option>
</select><br><br>
<label for="checkbox1">100kms</label>
<input type="checkbox" name="checkbox1" class="kilo" value="125" id="qr1" checked><br><br>
<label for="checkbox2">200kms</label>
<input type="checkbox" name="checkbox2" class="kilo" value="225" id="qr2"><br><br>
<label for="checkbox3">Tyre</label>
<input type="checkbox" name="checkbox3" value="20" id="qr3"><br><br>
<label for="checkbox4">Glass</label>
<input type="checkbox" name="checkbox4" value="20" id="qr4"><br><br>
<label for="checkbox5">General</label>
<input type="checkbox" name="checkbox5" value="60" id="qr5" checked><br><br>
<label for="checkbox6">Third Party</label>
<input type="checkbox" name="checkbox6" value="80" id="qr6"><br><br> Daily :<span id="userdaily"> </span><br><br> Total :<span id="usertotal"> </span><br><br>
<input tyep="text" id="pricef1" name="pricef1" value="">
<input tyep="text" id="pricef2" name="pricef2" value="">
...