2016-07-01 8 views
-1

Ich habe dieses HTML:javascript: wie Wert zu zeigen, von Checkbox

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

Und ich will in <p onclick=""></p>

das Ergebnis zeigen Wie Typ I Javascript zu offenbaren, was ich in "Checkbox" wählen ?

+1

Wenn Sie Ihre Frage stellten, gab es eine große orange ** Formatieren ** Feld rechts neben dem Textbereich mit nützlichen Informationen. Es gab auch eine komplette Symbolleiste mit Formatierungshilfen. Und eine ** [?] ** -Taste mit Formatierungshilfe. * Und * einen Vorschaubereich zwischen dem Textbereich und dem Post Your Question-Button (so dass Sie darüber scrollen müssen, um den Button zu finden, um Sie dazu anzuregen, ihn anzuschauen) und zeigen, wie Ihr Beitrag aussehen würde, wenn er gepostet wird . Wenn Sie Ihren Beitrag klarstellen und zeigen, dass Sie sich die Zeit genommen haben, verbessern Sie Ihre Chancen, gute Antworten zu erhalten. –

+0

Willkommen bei Stack Overflow! Bitte nimm die [Tour], schau dich um und lies dir die [Hilfe] durch, insbesondere [* Wie stelle ich eine gute Frage? *] (/ Help/how-to-ask) wird von dir erwartet ** etwas ** Anstrengung, tu ** etwas ** Forschung, bevor andere Leute gebeten werden, es für dich zu tun. –

+0

游泳 Leon

Antwort

0

Zuerst haben Sie einen gültigen Wert für die ID angegeben. Anstelle von "mein Formular" können Sie "myform" oder andere alphanumerische Werte eingeben, die nicht mit der Nummer beginnen können.

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

In Javascript Sie alle Kontrollkästchen sammeln und in <p> Element setzen, eine Funktion, die prüft, überprüft Kontrollkästchen und legen ihre concated Werte wie

<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> 
Verwandte Themen