js获取多个复选框checkbox选中的值

在一些含有批量处理的逻辑页中，复选框 checkbox 是使用率很高的一个html元素标签，如果使用 AJAX 形式提交数据的话，那么就需要借助JS获取到所有被选中的复选框checkbox的值，那该如何操作呢？下面飞鸟慕鱼就来说明一下。

js获取多个被选中复选框checkbox的值

html代码：

<input type="checkbox" name="test" value="1" /><span>1</span>
<input type="checkbox" name="test" value="2" /><span>2</span>
<input type="checkbox" name="test" value="3" /><span>3</span>
<input type="checkbox" name="test" value="4" /><span>4</span>
<input type="checkbox" name="test" value="5" /><span>5</span>
<input type='button' value='提交' onclick="fun()" />

原生js代码：

<script>
function fun() {
    //飞鸟慕鱼博客
    //获取所有的 checkbox 属性的 input标签
    obj = document.getElementsByName("test");
    check_val = [];
    for (k in obj) {
        //判断复选框是否被选中
        if (obj[k].checked)
            //获取被选中的复选框的值
            check_val.push(obj[k].value);
    }
    alert(check_val);
}
</script>

PS:

1、以上的js代码中，是将所有被选中复选框的值输入到一个数组中

2、你也可以，使用字符串的形式，组合所有被选中复选框的值

jq获取checkbox多选的值

有的开发感觉使用JQ要比使用原生的js代码方便的多，那么下面就给出一个关于使用jq获取多个被选中复选框的值的例子。

html代码：

<input type="checkbox" name="test" value="1" /><span>1</span>
<input type="checkbox" name="test" value="2" /><span>2</span>
<input type="checkbox" name="test" value="3" /><span>3</span>
<input type="checkbox" name="test" value="4" /><span>4</span>
<input type="checkbox" name="test" value="5" /><span>5</span>
<!--注意这里的提交按钮，和上面示例中的不一样-->
<input type='button' class="pst" value='提交'  />

jq代码：

<script>
    //使用下面的示例之前，应当先加载jquery.js插件
    $('.pst').on("click", function () {
        var str = "";
        $("input[name='test']:checked").each(function (index, item) {
            if ($("input[name='test']:checked").length - 1 == index) {
                str += $(this).val();
            } else {
                str += $(this).val() + ",";
            }
        });
        alert(str);
    });
</script>