怎么获取多个同时被选中的checkbox背后的值？

只贴出关键代码:

<input type="checkbox" value="1" name="username" />

<input type="checkbox" value="2" name="username" />

<input type="checkbox" value="3" name="username" />

<input type="checkbox" value="4" name="username" />

<input type="checkbox" value="5" name="username" />

<input type="button" value="删除" onclick="delete()"> 

方法一: 使用原生的JavaScript来实现

<script type="text/javascript">

        function delete(){

                var userids = []; //申明数组保存所有被选中checkbox背后的值

                var users = document.getELementsByName("username"); //得到所有的checkbox

                for(var i=0; i<users.length; i++){

                        if(users[i].checked){ //如果checkbox被选中

                                console.log(users[i].value);

                                userids.push(users[i].vlaue); //将被选中checkbox背后的值添加到数组中

                        }    

                }

        }

</script>

方法二:使用jquery来实现

<script type="text/javascript">

    function delete(){

        var userids = [];

        $("input : checkbox[name = username] : checked").each(function(i){ 

            //使用循环遍历迭代的方式得到所有被选中的checkbox复选框

                console.log($(this).val());

                userids.push( $(this).val() ); //当前被选中checkbox背后对应的值

        })

    }

<script/>

通过上面简单的例子, 可以很好的看出jquery确实是对javascript很好的一种封装, 例如,在第一种实现方式中获取checkbox背后的值使用的是users[i].vlaue 属性, 而通过第二种方式很明显 $(this).val() 是一种方法, 代码简洁且功能强大, 这也正是为什么jquery为什么这么受欢迎的原因之一。