Обработка группы флажков в строку

Question

У меня есть форма, которая содержит серию флажков в группе.Вот HTML -

<input type="checkbox" name="p_contents[]" value="Value 1" />
<input type="checkbox" name="p_contents[]" value="Value 2" />
<input type="checkbox" name="p_contents[]" value="Value 3" />
<input type="checkbox" name="p_contents[]" value="Value 4" />
<input type="checkbox" name="p_contents[]" value="Value 5" />

И я хочу обработать это с помощью JavaScript -

var contents;
for(var i=0; i < document.forms['addForm'].elements['p_contents[]'].length; i++){   
    if(i != (document.forms['addForm'].elements['p_contents[]'].length - 1)){
        if(document.forms['addForm'].elements['p_contents[]'].checked){
            contents += encodeURIComponent(document.forms['addForm'].elements['p_contents[]'][i].value) + ",";
        }
    }else{
        if(document.forms['addForm'].elements['p_contents[]'][i].checked){
            contents += encodeURIComponent(document.forms['addForm'].elements['p_contents[]'][i].value);
        }
    }
}

Я уверен, что проблема с перечислением:

document.forms['addForm'].elements['p_contents[]'][i].checked

Это правильный способ обработки сгруппированной формы флажка?

Answer 1

Я бы сделал это так:

var vals = [], p_contents =  document.forms['addForm']['p_contents[]'];
for(var i=0,elm;elm = p_contents[i];i++) {
    if(elm.checked) {
        vals.push(elm.value);
    }
}

и если вам нужен результат для строки, просто сделайте

vals.join(',');

Если требуется encodeURIComponent, сделайте это, прежде чем помещать значение в массив vals следующим образом:

vals.push(encodeURIComponent(elm.value));

Итак, подведем итог: если вы ищете тот же результат, который дает ваш собственный код, сделайте следующее:

var contents, vals = [], p_contents =  document.forms['addForm']['p_contents[]'];
for(var i=0,elm;elm = p_contents[i];i++) {
    if(elm.checked) {
        vals.push(encodeURIComponent(elm.value));
    }
}
contents = vals.join(',');

Вы можете увидеть это здесь: http://jsfiddle.net/3MRc7/

Answer 2

Как указано @ 9000, вы можете сделать то же самое, добавив элемент id и повторив его следующим образом

for (i = 0; i < length; i++) { //you can calculate length as you did before or any alternate way
    var prefix = 'yourPrefixToId';
    if (document.getElementById(prefix + i).checked) {
    // do stuff
    }
}

Answer 3

У вас есть несколько флажков с тем же именем.Вы не можете легко получить к ним доступ по имени.Добавьте уникальный идентификатор для каждого и используйте document.getElementById().Обратите внимание, что form.elements[] индексируется целым числом, а не именем, и просматривает каждый элемент в форме .

Кроме того, если вы назначаете длинное повторяющееся выражение с коротким именем var и затем используйте это короткое имя, оно значительно улучшит читабельность вашего кода.