如何使用javascript来处理一个大的html复选框?

时间:2013-02-20 15:53:36

标签: javascript html

所以我在表单中有这样的东西

<input type="checkbox" name="arr" value="A" />A
<input type="checkbox" name="arr" value="B" />B
<input type="checkbox" name="arr" value="C" />C
<input type="checkbox" name="arr" value="D" />D
<input type="checkbox" name="arr" value="E" />E
...
<more checkboxes here>
...

在我的Javascript中,我想创建一个包含已检查框的值的数组。因此,如果检查B和D,它应该是[B, D]

感谢

编辑:我不喜欢不包含jQuery标签,但是那个删除了他的答案的人给了我一个使用jQuery的简短工作解决方案:

var valueArray = $('input[type="checkbox"][name="arr"]:checked').map(function() {
    return this.value;
}).get();

2 个答案:

答案 0 :(得分:1)

根据您使用的内容,仅使用name="arr[]"就足够了。提交表单时,服务器端会自动将所选复选框值转换为数组。

但是,如果您尝试将此数组纯粹放在客户端JavaScript中,那么它就会更复杂一些。试试这个:

function getCheckedBoxes(name) {
    if( document.querySelectorAll) {
        var qsa = document.querySelectorAll("input[type=checkbox][name='"+name+"']"),
            l = qsa.length, i, out = [];
        for( i=0; i<l; i++) if( qsa[i].checked) out.push(qsa[i].value);
    }
    else {
        var qsa = document.getElementsByTagName('input'), l = qsa.length, i, out = [];
        for( i=0; i<l; i++) {
            if( qsa[i].type == 'checkbox' && qsa[i].name == name && qsa[i].checked)
                out.push(qsa[i].value);
        }
    }
    return out;
};

答案 1 :(得分:0)

你可以像这样使用jquery:

$("input[type=checkbox][name=arr][checked]").each( 
    function() { 
       // collect the values
    } 
);