在一些含有批量处理的逻辑页中，复选框 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> 