У меня есть форма с некоторыми флажками и фрагмент Javascript, где значения флажков добавляются и записываются в <span>. Это прекрасно работает, но мне бы очень хотелось, чтобы оно записывалось в поле ввода текста вместо <span>.

Вот секция флажка моей формы:

<section id="extra-features">
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.    </label>
</div>
</section>

Это <span>, в который в данный момент пишет javascript:

<span id="payment-total" style="text-decoration:underline;">0</span>

А вот и javascript:

window.onload=function(){
var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
    }
  }
}
1
Spyder Tech 16 Дек 2015 в 17:40

3 ответа

Лучший ответ

Вам не нужна петля. Используйте jQuery's change () вместо onchange. У него есть неявный цикл. Кроме того, использование jQuery для проверенных входных данных более надежно, чем настраиваемый JS. Вот минимальный рабочий пример:

$(document).ready(function() {
    function updateSum() {
      var total = 0;
      $(".sum:checked").each(function(i, n) {total += parseInt($(n).val());})
      $("#total").val(total);
    }
    // run the update on every checkbox change and on startup
    $("input.sum").change(updateSum);
    updateSum();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="extra-features">
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.    </label>
</div>
</section>
<input type="text" id="total">

Рабочий пример: https://jsfiddle.net/3veu206r/

2
Hubert Grzeskowiak 16 Дек 2015 в 20:41

С вашим кодом:

См. https://msdn.microsoft.com/ ан- нас / библиотека / ms535126 ( v = vs.85 ) .aspx

window.onload=function(){
var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total');

 for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.checked ? 1 : -1);
        total.innerHTML = parseFloat(total.innerHTML) + add
        var new_total = parseFloat(document.getElementById('input').value);
      console.log(new_total);
        document.getElementById('input').value=new_total + add
    }
  }
}
<section id="extra-features">
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="outside" class="sum" value="10" data-toggle="checkbox"> Outside Wash</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="aclean" class="sum" value="39" data-toggle="checkbox"> A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="bclean" class="sum" value="0" data-toggle="checkbox"> B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.</label>
</div><br/>
<div class="checkbox">
<label><input type="checkbox" name="checkbox" id="cclean" class="sum" value="109" data-toggle="checkbox"> C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.    </label>
</div>
</section>
This is the <span> that the javascript is writing to currently:

<span id="payment-total" style="text-decoration:underline;">0</span>
<input id="input" type="text" value="0"/>
1
jolmos 16 Дек 2015 в 14:49

Вы должны сделать для JQuery

$(total).val(parseFloat(total.innerHTML) + add);

Для javascript

total.value parseFloat(total.innerHTML) + add;
0
Parth Trivedi 16 Дек 2015 в 14:45