Как я могу изменить какой-либо текст, когда установлен флажок?

Question

У меня есть форма с тремя пунктами с флажками и ценами. В нижнем абзаце у меня есть область для общей цены и область для выбранных предметов. Как я могу обновить эти две области, когда каждый флажок установлен?

<form>
<input type="checkbox" name="milk" id="checkbox" value="10.00"/>£10.00<br/>
<input type="checkbox" name="eggs" id="checkbox2" value="20.00"/>£20.00<br/>
<input type="checkbox" name="cheese" id="checkbox3" value="30.00"/>£30.00<br/>
If you buy <span>name of items here</span>, it will cost you a total of £<span>price here</span>.
<input type="submit"/>
</form>

Как мне добиться этого с помощью jQuery или JavaScript? Я действительно не хочу использовать текстовое поле для ввода значений, я бы предпочел, чтобы они были встроенным текстом. Поэтому я хочу, чтобы имена объектов были указаны в первом бите, а общая цена - во втором.

Answer 1

jQuery

$(':checkbox').change(function() {
    var sum = 0;
    var names = $('form :checked').map(function(){
        sum += (this.value - 0);
        return this.name;
    }).get().join(',');

    var spans = $('form span');
    spans[0].innerHTML = names;
    spans[1].innerHTML = sum;
});

html

<form>
    <input type="checkbox" name="milk" id="checkbox" value="10.00"/>£10.00<br/>
    <input type="checkbox" name="eggs" id="checkbox2" value="20.00"/>£20.00<br/>
    <input type="checkbox" name="cheese" id="checkbox3" value="30.00"/>£30.00<br/>
    If you buy <span>name of items here</span>, it will cost you a total of £<span>price here</span>.
    <input type="submit"/>
</form>

demo

simple demo

Answer 2

Я использовал jquery для выполнения ваших требований.

Попробуйте это -

<form>
<input type="checkbox" name="milk" id="checkbox" value="10.00"/>£10.00<br/>
<input type="checkbox" name="eggs" id="checkbox2" value="20.00"/>£20.00<br/>
<input type="checkbox" name="cheese" id="checkbox3" value="30.00"/>£30.00<br/>
If you buy <span id="name">name of items here</span>, it will cost you a total of £<span id="price">price here</span>.
<input type="submit"/>
</form>


$(document).ready(function(){

 $('input[type="chechbox"]').click(function()[

  if($(this).is(':checked')){

   $('#price').html($(this).val());
   $('#name').html($(this).attr('name'));

  }else{

   $('#price').html('Price');
    $('#name').html('name');
  }

 });

});

Answer 3

Использование чистого JS (не проверено)

   handleCheckbox = function(){
      if(this.checked) {
        document.getElementByTagName("span")[0].innerText = this.attributes["name"].value;
        document.getElementByTagName("span")[1].innerText = this.value;
      }
    }

Однако вместо флажка должно быть радио.Добавить onClick="handleCheckbox" на флажок