チェックボックスをクリックしたときにテキストを変更するにはどうすればよいですか？

Question

私はチェックボックスと価格で3つの項目を持つフォームを持っています。下の段落には、総価格の領域と選択された項目の領域があります。各チェックボックスをオンにすると、これら2つのエリアをどのように更新できますか？

<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でこれを達成できますか？私は本当に値を入れるためにテキストボックスを使用したくない、むしろインラインテキストだっただろう。だから、最初のビットにオブジェクト名を、2番目のビットにトータルプライスを入れたい。

Answer 1

のjQueryにあるチェックボックスをonClick="handleCheckbox"を追加

$(':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> 

デモ

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; 
     } 
    } 

を使用して、ラジオの代わりにチェックボックスがあるはずです。