のjavascript：チェックボックス

Question

から値を表示するにはどのように私は、このHTMLがあります。

<form id="my form"> 
<input type="checkbox" name="interest" value="swim"/> 
<input type="checkbox" name="interest" value="baseball"/> 
<input type="checkbox" name="interest" value="basketball"/> 
<input type="checkbox" name="interest" value="badminton"/> 
<input type="checkbox" name="interest" value="running"/> 
</form> 

を私は「チェックボックス」で私が何を選ぶか明らかにするために、私はJavaScriptを入力するにはどうすればよい<p onclick=""></p>

に結果を表示したいです？

Answer 1

まず、idに有効な値を指定しました。 "my form"の代わりに、 "myform"または数値で始まる数字以外の値を置くことができます。 JavaScriptで

<form id="myform"> 
<input type="checkbox" name="interest" value="swim"/> 
<input type="checkbox" name="interest" value="baseball"/> 
<input type="checkbox" name="interest" value="basketball"/> 
<input type="checkbox" name="interest" value="badminton"/> 
<input type="checkbox" name="interest" value="running"/> 
</form> 

<p id="pResult" onclick="showCheckedValues(event);"></p> 

あなたはすべてのチェックボックスを収集し、<p>要素にチェックする機能を入れて、チェックボックスをチェックして、あなたの質問をしたとき

<script> 

    var checkboxes; 
    function showCheckedValues(ev){ 
    var pElement = ev.target; 
    if(checkboxes){ 
     var checkedValues= []; 
     checkboxes.forEach(function(x){ 
      if(x.checked){ 
       checkedValues.push(x.value) 
      } 
     }); 
     pElement.innerHTML = checkedValues.join(','); 
    } 
    } 
    window.onload = function(){ 
    checkboxes = document.querySelectorAll('input[type=checkbox]'); 
    } 
</script>