javascript - 将复选框组处理成字符串

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/