Wie man Formularfeldwerte in Javascript manipuliert

Question

Ich versuche, den Wert einiger Checkboxen zu erhalten und sie in einem versteckten Formularfeld einzugeben.

Meine Kontrollkästchen wie folgt aussehen:

<form> 
    <input type="checkbox" name="chicken" id="chicken" value="chicken"/>Chicken 
    <input type="checkbox" name="meat" id="meat" value="meat"/>Meat 
</form> 

<form method="post" action=""> 
    <input type="hidden" name="my-item-name" value="" /> 
    <input type="submit" name="my-add-button" value=" add " /> 
</form> 

Ich muss nur die versteckten Felddaten vorzulegen, damit ich den Wert des verborgenen Feldes ändern möchten, wenn das Kontrollkästchen aktiviert ist. Wenn also das erste Kästchen angekreuzt ist, möchte ich, dass der Wert des versteckten Feldes zu Hühnchen wird und wenn beide Häkchen gesetzt sind, sollte der Wert Hühnchen, Fleisch sein.

Ich bin mit dem folgenden Javascript

function SetHiddenFieldValue() 
{ 
    var checks = document.getElementsByName("checkbox"); 
    var hiddenFieldVal = ""; 

    for(i = 0; i < checks.length; i++) 
    { 

    if(hiddenFieldVal != "") 
     hiddenFieldVal += ","; 
    hiddenFieldVal += checks[i].value; 
    } 

    document.getElementById('my-item-name').value = hiddenFieldVal; 
} 

aber wenn ich die Elemente hinzufügen, fügt sie beide, es überprüft nicht, die man überprüft hat worden ist, ist es eine Möglichkeit, dass beheben, so dass, wenn das erste Element überprüft wird, es wird nur das Element hinzufügen und wenn beide von ihnen kontrolliert werden, wird es zwei Elemente durch Komma,

Answer 1

for(i = 0; i < checks.length; i++) 
{ 
    if (!checks[i].checked) 
     continue; 
    .... 
} 

Answer 2

Sie benötigen, um den Kontrollkästchen das gleiche getrennt hinzufügen Name sie gruppiert haben:

<input type="checkbox" name="food[]" id="chicken" value="chicken"/>Chicken 
<input type="checkbox" name="food[]" id="meat" value="meat"/>Meat 

Und in Ihrem JavaScript-Funktion:

function SetHiddenFieldValue() { 
    var checks = document.getElementsByName("food[]"); 
    var hiddenFieldVal = ""; 
    for (var i=0; i<checks.length; i++) { 
     if (checks[i].checked) { 
      if (hiddenFieldVal != "") 
       hiddenFieldVal += ","; 
      hiddenFieldVal += checks[i].value; 
     } 
    } 
    document.getElementById('my-item-name').value = hiddenFieldVal; 
} 

Answer 3

Sie für Kontrollen zu testen vergessen [i] .checked

function SetHiddenFieldValue() { 
    var checks = document.getElementsByName("checkbox"); 
    var hiddenFieldVal = ""; 
    for(i = 0; i < checks.length; i++) { 
    if (checks[i].checked) { 
     if(hiddenFieldVal != "") 
     hiddenFieldVal += ","; 
     hiddenFieldVal += checks[i].value; 
     } 
    } 
    } 
    document.getElementById('my-item-name').value = hiddenFieldVal; 
} 

Answer 4

Hallo Ihr Bestes, um die Werte zu setzen in ein Array, erleichtert es dann, den kommagetrennten Wert zu erstellen. Außerdem wird es viel einfacher, wenn Sie später weitere Optionen hinzufügen.

function SetHiddenFieldValue() 
{ 
    var checks = document.getElementsByName("checkbox"); 
    var foods = new Array(); 
    for (i = 0; i < checks.length; i++) 
    { 
     if (checks[i].checked) 
     { 
      foods[i] = checks[i].value; 
     } 
    } 
    document.getElementById('my-item-name').value = foods.join(","); 
}